SEOL IB DESIGN PROJECT

↑ Home page

↑ Magazine Index page

↑ Magazine Detailed page

• 자기소개: 저는 코딩을 한 1년 정도 배운 학생입니다. 코딛을 배운지 3~4 개월 쯤 되었을 때, 이것을 진로로 정하고자, 2 개월 정두 후에 캐나다로 유학을 왔습니다.

• 서비스소개: 이 웹사이트 제가 유학을 온 학교에 있는 디자인 클래스에서 만든 디자인이나 결과물 들을 소개하고, 이것에 대한 생각들을 적어논 장소 입니다.

• 시작하게된 계기: 그 클래스에서 Weebly 라는 웹사이트 플랫폼을 기반으로 이 웹사이트와 비슷한 것을 만들었어야 했습니다. 그런데, 그 플랫폼 자체가 HTML DOM Element 들을 쉽게 조직적으로 컨트롤을 하지 못하고, 애니메이션과 제가 원하는 것들을 마음대로 추가하거나, 변경 할 수가 없었습니다. 제가 웹사이트를 잘 만들 수 있다고 자신이 있었던 만큼, 선생님께 양해를 구하고, 이 웹사이트를 만들었습니다. 다행히, 선생님께서 흔쾌히 수락해주셨습니다.

• 개발: Framework 는 기본적으로 이 웹사이트 자체를 굉장히 체계적으로 만들고 싶었고, 지금은 아주 자그만한 웹사이트이지만, 시간이 지나면서 점점 더 많은 프로젝트들이 추가가 될 것을 고려해서, 개발을 체계적이고, 제가 사용할 수 있는 장점이 많은 NextJS 를 선택하였습니다. Style Framework 같은 경우에는, 대부분의 NextJS 프로젝트가 Tailwind CSS 를 기반으로 하는 만큼, 저도 초반에는 이 웹사이트에 Tailwind CSS 를 사용하였습니다. 하지만 시간이 지날 수록 이것에 대해서 Class Name 이 너무 길어 읽기가 어렵거나, 아니면 퍼포먼스적인 기술 문제의 결함들이 많아, 새로운 Style Framework 를 하나 배워보자는 마음에, Chakra UI 를 새롭게 적용 하였고, 현재는 이 웹사이트는 Chakra UI 를 Style Framework 를 기반으로 작동하고 있습니다. 다음으로, 제가 Weebly 를 기반으로 만들지 않았던 이유가 애니메이션과 관련이 많았던 만큼, 애니메이션을 자연스럽게 추가하고 싶었습니다. 그래서 Framer Motion 을 추가적으로 설치했습니다. 마지막으로, Holiday House 라는 프로젝트가 이 웹사이트에 추가가 될 것인데, 이 프로젝트는 Ginger Bread House 와 비슷한 쿠키로된 집을 3D 로 만들고, 그것을 실제로 다시 과자와 간식들로 새롭게 만들어보는 프로젝트 입니다. 여기에서 3D 를 표현하고자, THreeJS 를 사용해, 사용자가 제가 이것을 3D 로 만들었을 때 사용하였던 서비스인, Tinkercad 에 링크되어서 보지 않아도, 이 웹사이트 자체에서 바로 볼 수 있게 하였습니다

  • Framework: NextJS

  • Style Framework: Chakra UI

  • Additional Libraries: Framer Motion, ThreeJS

• 바라는 것: 저는 이 프로젝트가 단지 저의 학교 숙제에서 그치는 것이 아닌, 저의 모든 디자인들을 볼 수 있는 프로젝트로 키우는 것이 저의 바램입니다.

링크 : https://seolibdesign.vercel.app

깃헙 : https://github.com/cattynip/seolibdesign

참고로, 제 이름이 '소설' 입니다. 그래서 영어로는 성, 이름 바꿔서 'Seol SO' 가 된것 입니다.