오늘은 Threads에서 조회수가 2,900회를 넘은 게시물을 공유하려고 합니다.

View on Threads

그동안 Antigravity와 Claude Code를 활용해서 웹사이트를 새로 디자인하고 있었거든요. 처음에는 "딸깍"하면 웹사이트가 바로 "딸깍" 생성되어 나오는 줄 알고 '3일 완성'이라는 목표를 세우고 진행했는데요. 막상 해보니 그렇게나 빠르게 완성하는 것이 쉬운 일은 아니었습니다. 이유는 단순했습니다. 인공지능이 생성해 준 디자인 결과물이 디자이너의 의도를 100% 반영해 주지 못한다는 사실이었습니다.

디자이너의 의도에는 가독성, 심미성, 기능성이 포함됩니다. 잘 읽히는지, 보기에 편한지, 그리고 기능적으로 수행하는지 등의 잣대를 가지고 디자인(Design)을 코드(Code) 단에서 수정하다 보면, 계속 수정-확인의 반복 루프에 빠지는 나 자신을 발견할 수 있었습니다.

그래서 인공지능을 활용하되, 되도록이면 가독성, 심미성, 기능성 면에서 우수한 결과물을 뽑아낼 수 있는 방법과 프로세스를 스스로 만들어 보자는 의도로 아래의 글을 작성하였습니다. 그리고 다행히 많은 분이 공감해 주셨습니다.

함께 읽어보시죠.

이제 Figma의 시대는 막을 내렸습니다. 대신 Storybook과 Claude의 조합을 사용하세요. Storybook에서 디자인 시스템(Design System)을 만들고(적어도 세 벌), 이를 실제 사이트에 적용하는 프로세스를 구축해야 합니다.

영문과 한글의 조화, 실제 버튼의 등장 형태, 가독성 이슈, 전반적인 컬러 톤앤무드(Color Tone & Mood), 브랜드의 방향성 등을 Storybook에서 충분히 검토하세요. 그다음 진짜 '딸깍' 단계로 넘어가서 바로 본인의 사이트에 적용 가능하게 만드는 것이 생산성 폭발의 기본입니다.

Pastel 버전

Coffee 버전

Blue 버전

이 프로세스를 구축하려면 Tailwind CSS 4 버전과 Storybook을 설치하세요. 저는 React, Vite, TypeScript, Storybook, Tailwind CSS를 설치해서 사용 중인데요. 이 조합이 스타터 킷(Starter Kit)이라고 할 수 있겠네요. (스타터 킷치고는 요란하죠?)

그런데 이 조합은 Google AI Studio를 사용하면서 배운 조합이고요. 인공지능이 선호하는 조합인 듯해요. 그래서 인간이 배워서 함께 작업해야 한답니다. 인공지능에게 배울 것은 빨리 배워야죠.

이처럼 세 벌의 디자인 시스템(Design System)을 갖춰놓으면, 세 가지 다른 버전의 룩앤필(Look & Feel)을 가진 웹사이트를 딸깍하는 버튼 하나로 만들어 볼 수 있습니다. 

하나의 스타일을 가진 웹사이트 디자인을 위해서 인공지능을 활용하는 것도 좋고, 이렇게 다양한 스타일을 쉽게 바꿔볼 수 있는 웹사이트 디자인을 만들어보는 것도 좋습니다. 하지만 일단은 한번 만들어보는 겁니다. 정보를 얻고 계획을 세우는 것보다 실행에 옮기는 것이 더 중요한 시대이기 때문이에요.