필요했던 걸 만들 수 있게 되었다면? 만들어보자 ! (with. 조아용 상품소개서)

디자인 지옥에 빠져 허우적대는 중....약간의 스포와 함께

어떤 목적으로 왜 만들고 싶은지에 대해

작년 초부터 말까지 나는 시청에서 특례시 마스코트를 이용한 굿즈 디자인 업무를 한 적이 있었다.

디자인부터 제작 공장 컨택, 홍보물 제작에 이르기까지 전반적인 모든 업무를 수행하다보니, 상품 소개서에 대한 필요성을 많이 느꼈다.

이 사업을 잘 모르는 공장주에게 지속 가능하고 신뢰성있는 사업이라고 설득할 때도 필요하고, 단체 주문 손님들에게만 제공되는 상품 옵션들을 쉽게 구분해서 보여주기 위해서도 필요하다.

 

물론 인쇄물로 상품 소개서를 제작하기는 했다. 하지만 이는 한 번 제작할 때마다 최소 2만장에서 많게는 3만장 이상 제작해야 했고, 이에 따라 기간과 비용이 큰 부담으로 다가왔다.

심지어 우리는 끊임없이 신제품과 기존 제품의 새로운 옵션을 제작했기 때문에 큰 돈 들여 제작한 상품소개서가 금방 구버전이 되기 십상이었다. 이때부터 상품소개서가 웹으로 제작된다면 어떨까..? 개인 손님들에게는 기존의 스마트 스토어로 안내하고, 단체 손님들에게만 따로 웹으로 된 상품소개서를 제공한다면 훨씬 업무가 쉬워질텐데 하는 생각을 가지고 있었다.

 

하지만 막상 근무할 때는 그런 기술이 나에게 없었다. 하지만 지금은? 웹을 만들 수 있는 기술이 생겼으니 지금이라도 만들어보는 건 어떨까 하는 생각이 들었고, 그렇게 제안서를 작성해서 근무지에 전달했다.

 

과거에 같이 근무했던 분들에게 정식으로 이런 업무적인 제안을 드려보는 것이 처음이라 많이 어색했지만, 그래도 내가 느꼈던 필요성에 깊이 공감하시면서 제작에 응해주셔서 공식적으로 상품 소개서 제작기가 시작되었다 !

 

아주아주 큰 고민

나는 백엔드를 구현해본 적이 없다.

이건 정말 엄청나게 큰 난관이 따로 없다.

일단 단순하게 생각했을 때 백엔드가 필요한 부분은 단순히 DB에 있는 데이터를 요청에 따라 내려보내주는 것 정도이지만, 나는 이후 기능 확장을 고려하고 있기 때문에 잘 생각해야 한다.

 

심지어 레포를 어떻게 구성해야하는 지도 잘 모르겠다. (당연하지 안해봤으니까)

일단 레포를 분리해야하나? 그럼 organization을 만들어야 하나? 혼자서? 아니면 하나의 레포에 두 개의 폴더를 해서 프론트 백 나눠서 작업을 해야할까? 정말 머리가 터질 것 같다. 어느 것 하나 제대로 아는 것이 없다...

 

일단은 Node.js와 MongoDB, Express로 백을 구현해볼 생각이다. 코드잇에서 수료하고 나서 코드잇에 있는 강의를 무제한으로 수강할 수 있게 해줘서 그 강의를 들으면서 시작을 하고, 나머지는 다른 사람들 Github 염탐해보려고 한다.

 

내 머릿속에 있는 지식이 늘어날 수록 그래도 보는 눈도 생기지 않을까..?

엄청 막막하고 머리가 아픈데...........아픈ㄷ....ㅔ......... 와타시 왜 두근거리는 거야.....!? 정말 곤~란하군 !

 

 

프론트 프로젝트 세팅

몇 번 해봤다고, 프론트 쪽 프로젝트 세팅은 그래도 금방하는 것 같다.

프로젝트에서 사용할 기술 스택들은 이러하다.

 

프론트엔드 기술 스택과 선정 이유

Next.js v.14 _app router + typeScript

Next.js의 15 버전이 등장한 지금, 어째서 14를 쓰느냐?

첫 번째 이유는 여러 라이브러리들과의 호환성 문제가 완전히 검증되지 않은, 너무 따끈따끈한 버전이어서

두 번재 이유는 스토리 북으로 UI 단위의 테스트를 하면서 진행할 예정인데, 스토리북은 Next.js의 14 버전과 호환이 된다고 공식 문서에 명시되어 있기 때문이다.

React가 아닌 Next.js를 선택한 이유는 상품 사진들이 굉장히 많이 들어가게 될 예정이기 때문이다. 이미지 사용이 많을 수록 Next.js에서 제공하는 이미지 최적화를 적극적으로 활용할 수 있기 때문에 선택했다.

 

 

CSS 기술 변경 (Emotion -> Tailwind)

Emotion CSS

사실 나는 Tailwind보다 Styled-components를 선호하는 편이다. 기본적인 CSS 문법과 가장 유사하기도 하고, Tailwind와 달리 애니메이션을 적용할 때에도 별도의 config 파일에 추가하지 않고 사용할 수 있기 때문이다.

하지만, Styled-Components는 Babel 플러그인을 사용하는데 Next.js의 기본 컴파일러인 SWC는 아직 Babel의 모든 플러그인과 기능을 지원하지 않아서 빌드 시 성능 최적화가 제대로 되지 않을 수 있다는 단점이 있다.

그래서 내가 택한 방법은 바로 Emotion을 사용하는 것이다. Emotion은 SWC와 호환되도록 설계된 구조와 플러그인을 가지고 있어서 Next.js의 SSR환경에서도 깜빡임이나 스타일이 제대로 적용되지 않는 문제를 방지할 수 있다고 한다.

또한, Emotion은 Styled-Components와 유사한 사용방법을 제공하기 때문에 이번 기회에 Emotion을 사용하기로 결정했다.

 

Next.js의 SSR 환경에서 emotion을 사용하려면 Webpack과 next.config.mjs 파일 추가 및 관련 캐싱 util 함수를 정의해서 사용해야한다. 그리고 처음 사용해본다는 점에서 도전해려고 했으나, 이번 프로젝트의 챌린지로 디자인 시스템 구축을 추가해서 추가 설정이 불필요하고, 사용이 익숙한 Tailwind를 쓰기로 변경했다.

TailwindCSS

이번 프로젝트의 1차 구현 요구사항은 간단하지만, 앞으로의 확장 가능성을 고려해 디자인 시스템을 구축하며 개발을 진행하려고 한다. 이를 위해서 스타일 토큰(color, typograhpy 등)을 tailwind.config.js 파일에 미리 정의하여 일관된 디자인을 유지하고, 재사용성을 높이려고 한다. tailwindCSS는 사전에 정의한 스타일 토큰을 쉽게 적용하고 관리할 수 있어, 디자인 시스템을 체계적으로 확장하기에 적합하다고 판단했다.

 

 

Storybook

스토리 북은 이전 포스팅에서 사용했을 때의 이점에 대해 다루었었다.

 

2024.11.04 - [🗂️ 개발 이모저모] - 스토리 북에 대해서 알아보자 !

스토리 북에 대해서 알아보자 !

이전 글을 포스팅하면서 도입 시 장점에 대해서는 충분히 자각하고 있기 때문에 혼자 진행하는 프로젝트이지만 도입하기로 했다.

UI 컴포넌트 단위로 개발하면서 최대한 비즈니스 로직과 UI 컴포넌트 분리하겠다.

단일 책임 원칙 딱 대

 

 

기타 세팅 이것저것

ESLint랑 Prettier, import문 order 규칙 설정, globals.css에 resetCSS 등록하기 등 기본적인 세팅은 끝난 것 같다.

아직 디자인이 마무리되지 않아서 font 파일은 세팅하지 못했지만, 디자인도 1차는 거의 마무리 단계에 돌입해서 다음주에 미팅 다녀와서 컨펌나면 실제 사진 파일들 전달받고 반응형 작업 시작하면 될 것 같다.

 

디자인이 마무리되면 font 파일도 넣고, 사용할 수 있도록 세팅해둔다음 icon 파일들도 추가할 생각이다.

기존에 나는 svg파일들을 직접 컴포넌트로 만들어서 쓰고 있었는데, 이번에는 기본적으로 public안의 icon 폴더에 넣어둔 채로 svgr이라는 라이브러리를 써서 조금 더 편하게 컴포넌트처럼 svg파일을 사용할까 한다.

물론 사용하다가 그냥 내가 컴포넌트로 변환하는게 낫다 싶으면 그렇게 쓰겠지만, 일단 생각은 그러하다. (누구나 계획은 있다..쳐맞기 전까...)

 

 

백엔드 프로젝트 세팅

적으면서도 자신이가.....자신이가 없다

일단 다른 언어로 할 수는 없으니, 웹에서 벗어나게 해준 소중한 기술...Node.js로 구현할 겁니다.

Express랑 MongoDB를 이용해서 서버와 DB를 구성할 건데요.

이렇게 선정한 이유는 처음 백엔드에 입문해서 서버를 구현하는 입장이라면 이 구성이 가장 추천된다는 글을 읽었습니다.

앞으로 공부하면서 선택의 이유에 대한 깊이감을 늘려나가야겠죠..?

 

이 전에 생활 코딩 님의 Node.js 강의를 좀 수강해봤습니다. 이때 들었던 강의가 도움이 되길 바라며, 레포지토리에 backend 폴더를 만듭니다....화이팅 !

 

백엔드 프로젝트 세팅이라고 적고 아직 아무것도 안했음을 고백합니다.

 

앞으로 발전하는 프로젝트를 기대해주십쇼 !

 

 

그럼 오늘은 이만~!

안뇽 !