프론트엔드 개발자의 바이브 디자인하기

개발하면서 늘 느끼는 게 있다.
코드는 어떻게든 짜겠는데,
예쁜 화면은 의지로 해결되지 않는다는 것.

버튼 하나, 여백 하나, 폰트 크기 하나만 달라도
같은 기능인데 화면 분위기가 완전히 달라진다.
그래서 새삼 깨달았다.

서비스 디자이너의 유무는 엄청나구나 . . .

디자인의 중요성을 굉장히 잘 알고 있었기에 내가 무작정 디자인 했다가는 배포하자마자 망할 것 같았다.^^

하지만 나의 친구들과 함께라면 두렵지 않았다...!!

디자인 지식이 부족한 나는 우선 기능 요구사항을 Claude에 넣어
1차적으로 화면을 생성했고,
그 결과물을 다시 Stitch AI에 넣어 디자인 초안을 만들어봤다.

문제는 그 과정이 생각보다 힘들었다.
마음에 안드는 부분은 figma에서 한땀한땀 수정해야했기 때문...
페이지 하나를 겨우 마음에 들게 고치고 나서 가장 먼저 든 생각은 이거였다.

아... 기능 추가할 때마다 이 짓을 또 해야 한다고?

그건 진짜 아니었다.
디자이너를 영입해야 하나 잠깐 고민했지만, 곧 다른 생각이 들었다.

“그냥 내가 디자인 시스템을 만들어버려?”

한 번 기준을 잘 잡아두면,
나중에 기능이 늘어나도 매번 화면을 처음부터 다듬는 대신 필요한 컴포넌트를 조합해서 훨씬 수월하게 만들 수 있을 것 같았다.

(디자인 시스템 구축을 해보고싶기도 했다ㅎㅎ)

그래서 storybook을 이용하여 디자인시스템 구축을 하기로 결심!!!
시리즈 다음 편은 디자인시스템 구축 과정과 느꼈던 점들에 대해서 작성해보겠다