AI냄새 나지 않는 디자인의 비밀

바야흐로, 바이브코딩의 시대입니다.

요즘 바이브코딩으로 MVP개발은 물론, 1인 개발로 수익 창출하는 사례들을 정말 많이 볼 수 있는데요.

실제로 시도해보면, 내가 만든 웹페이지는 디자인이 만족스럽지 않거나, 다른 페이지들과 차별화되지 않아 고민인 경우가 많으셨을거에요.

저도 이런 걱정으로 진즉 만들어놓은 랜딩페이지를 한달 넘게 공개하지 못해 고민했던 적이 있는데요 (지난주 뉴스레터를 참조하세요), 이번에 운이 좋게 일할맛판교 오프라인 세미나에 참석하여, 디자인을 한단계 더 업그레이드할 해답을 찾았습니다.

코드팩토리 최지호 대표님의 강연 @일할맛판교 8월

코드팩토리 최지호 대표님의 강연

누적 수강생 3만 명을 가르치며, 인프런과 패스트캠퍼스에서 연속으로 어워드를 휩쓸고 있는 '코드팩토리' 대표이자 강사, 유튜버이신 최지호님이 그 주인공입니다. 지호님은 임페리얼 공대를 졸업하고 Milliman에서 소프트웨어 개발자로 일했는데요. 현재는 AI 시대의 디자인 워크플로우를 연구하며 강의하는 분이랍니다.

최지호님은 국내에서 '거의 유일'하게 AI 디자인의 근본적인 문제를 파악하고, 실제 디자이너들과의 인터뷰를 통해 체계적인 해결책을 만든 분이에요. 그동안 우리가 AI로 디자인을 할 때마다 뭔가 어색하고 '티가 나는' 결과물에 답답함을 느꼈었는데요. 지호님의 'AI냄새 나지 않는 디자인하는 법' 강연을 듣고 보니, 우리가 AI를 완전히 잘못 쓰고 있었더라고요.

AI는 왜 디자인을 못할까요?

최지호 대표님은 이 질문부터 시작합니다.

사실 우리 모두가 느끼고 있었던 문제였어요. AI가 만든 디자인은 뭔가 유사하고, '아, 이거 AI가 만들었구나'티가 확 나더라고요. 간혹, 어떤 웹페이지들은 어느 플랫폼에서 만들었구나하고 유추할 수 있을만큼 비슷해요. 정말 AI냄새가 너무 나서, 이런걸로 내 소중한 서비스를 소개한다는건... 뭔가 결례가 아닐까 싶을 정도였거든요.

그래서, 최지호님은 실제 디자이너들과 수많은 인터뷰를 통해 이 문제의 원인을 파헤쳐봤다고 하는데요. 발견한 답은 명확했습니다.

AI가 디자인을 못하는게 아니라, 우리가 AI에게 너무 많은 결정을 위임했다는 것이었습니다.

AI를 시니어처럼 대하지 마세요

정말 뜨끔했어요. 그동안 저는 AI에게 "현대적인 스타일의 히어로 섹션을 만들어줘" 정도로 대충 던지고 결과를 기대하고 있었거든요.

그런데 생각해보니까, 신입 디자이너한테도 이렇게 막연하게 지시하지 않잖아요. 레퍼런스도 주고, 가이드라인도 주고, 체크 포인트도 만들고 그러잖아요.

"사람에게 안되는 건 AI에게도 안되고, 사람을 성장시키는 워크플로우는 AI의 산출물 퀄리티를 향상시키는 데에도 도움이 된다"

이 말씀이 정말 핵심이었어요.

실제 디자이너들의 4단계 워크플로우

최지호님이 디자이너들과 인터뷰를 통해 발견한 워크플로우는 다음과 같았어요:

1. 레퍼런스 모으기

2. 테마 분석하기 

3. 공통 컴포넌트 제작하기

4. 페이지 구현하기

기존에 제가 하던 방식과 비교하면... 정말 창피하더라고요.

[기존 방식] 사이트 캡처 → 이미지 입력 + 비즈니스 맥락 제공 → 페이지 구현

[디자이너 방식] 레퍼런스 수집 → 상세 분석 → 컴포넌트 제작 → 페이지 구현

정말 차이가 엄청나죠? 특히 디자이너들은 레이아웃, 색상, 그래픽, 타이포그래피 등 디자인 요소를 매우 상세히 분석한다는 거예요. 정확한 색상 코드나 보더, 반경, 픽셀값 같은 모든 디테일을 수치화한다고 하더라고요.

1단계 : 필수 기본기 - 레퍼런스 모으기

가장 기본, 가장 중요한 단계입니다. 최지호님께선 클로드를 이용해 아래와 같은 프롬프트로 시도해보시길 추천했어요.

실행예시 : https://claude.ai/share/a1f5f78a-0360-4999-b919-581d5f4b4369

유용한 레퍼런스 사이트들

레퍼런스를 모을 때는 무료 클리핑 서비스 https://stashby.me/를 활용하면 유용하고, 디자이너들이 적극 활용하시는 이런 전문 사이트들도 도움이 됩니다.

dribbble.com (세계 최대 크리에이티브 커뮤니티, 디자이너 포트폴리오 플랫폼)

behance.net (Adobe 소유, 무료로 이용 가능한 크리에이티브 네트워킹 사이트)

mobbin.com (30만개+ 모바일 앱 UI 스크린샷 라이브러리)

awwwards.com (세계 최고의 웹사이트 디자인 어워드 플랫폼)

uxdnas.com (세계 최대 UX/UI 디자인 레퍼런스 아카이브)

60fps.design (UI/UX 애니메이션과 마이크로인터랙션 전문 플랫폼)

pinterest.com (시각적 검색과 아이디어 수집)

여기서 중요한 건, 그냥 "예쁜 사이트들"이 아니라 내가 만들고자 하는 것과 유사한 맥락의 사이트들을 찾는 거였어요.

2단계 : AI 디자인의 게임체인저 - 테마분석

저는 이 부분이 가장 핵심적이라고 판단했어요. "테마"를 구체적인 수치로 분석하여 정의하는 것. 이로써 우리는 시각적인 스타일을 AI가 다시 재현해낼 수 있는 숫자로 표현하는 것이죠.

이건 비단 AI와 일을 하기 때문만은 아니에요. 개발자와 디자이너가 팀으로 일할 때도 반드시 일어나는 일이거든요. 최지호님은 이렇게 실제 팀이 겪는 과정을 지속적으로 벤치마킹하여 AI 워크플로우를 구현하고, AI를 주니어로 간주하고, 이 일을 해본 적이 없으니, 최대한 상세히 지시하는 것을 강조하세요.

2단계는 대상 사이트의 레이아웃, 색상, 그래픽, 타이포그래피를 상세하게 가져오는 것이 목표이며, 특히, ShadCN과 같은 UI 프레임워크의 CSS 키 값은 유지하고 값만 변경하라고 지시하는 게 핵심이었어요. 이렇게 하면 나중에 구현할 때 혼선이 줄어든다고 하더라고요.

최지호님께서 공유해주신 프롬프트를 이용해 클로드에서 사이트를 분석한 결과 정말 구체적인 정보를 아주 쉽게 가져올 수 있었어요.

내ai내산 CLAUDE 실행예시

테마분석시 주의할 점

하지만, 최지호님은 클린 아키텍처를 통해 확장가능하고 유지보수 가능한 시스템을 구축하는 것을 추구하시는데, 저는 이를 마치 객체지향형 구조를 만드는 것과 유사하다고 이해했어요.

따라서, 크롤링하는 웹사이트에서 사용하는 속성 이름이 ShadCN과 같은 프레임워크의 속성값과 정확히 일치하지 않더라도, AI가 의미를 분석하여 적절한 속성의 이름에 맞춰 값을 저장하도록 유도합니다. 이를 통해 구현 단계에서 혼선을 일으킬 확률을 낮추는 것이죠.

- 글로벌 디자인 토큰 표준 스키마와 보다 상세한 프롬프트, 실제 실행 예시는 팀장찐바 뉴스레터 구독자께 별도 이메일로 송부해드리겠습니다! 구독 부탁드려요!

3단계 : 공통 컴포넌트 제작

이제, 수집된 테마 정보를 이용해 웹페이지에 사용할 공통 컴포넌트를 제작할 차례예요.

"AI에게 큰 결정을 맡기지 마세요"

제일 먼저, 어떤 프레임워크, 라이브러리를 사용할지 결정해야하는데요, 최지호님은 일관된 메시지로 이렇게 표현합니다.

따라서, Next.js, ShadCN 등을 설치하고 설정하는 것을 직접 진행하길 권하세요. 이는 토큰을 절약할 수 있는 방법이기도 합니다.

또한, ShadCN MCP를 사용해보시길 적극 권장합니다. 컴포넌트 자동 생성, 테마 적용, 커스터마이징까지 쉽게 진행할 수 있거든요.

"프로젝트 룰 관리의 중요성"

최지호님은 또한 프로젝트 룰을 까다롭게 관리하는 것을 추천합니다. CLAUDE.md, cursorrules 같은 파일은 AI가 파일 구조와 내용을 한 눈에 파악할 수 있게 하는 좋은 가이드자료가 되며, 전역 룰 관리 뿐만 아니라 세부 폴더별 규칙을 분리함으로써 AI가 해당 폴더에 들어갈 때만 그 룰을 참조하게하여, 컨텍스트를 절약하고 할루시네이션을 감소시키는 효과를 가져올 수 있어요.

"스타일 중앙화 설정"

이제, 스타일 중앙화를 위해 globals.css을 아래의 파일 구조와 지시사항을 참조하여 생성하길 추천합니다.

"공통 컴포넌트 작성"

이제, css가 설정되었으니까, 페이지를 작성하고 싶으시죠?

최지호님은 여기서 많은 개발자들이 가장 많이 실수한다고 지적합니다.

테마를 css로 설정하였지만, 공통 컴포넌트를 제작하지않고 바로 페이지를 만든다면, 중복 코드 폭발 + 일관성 붕괴가 발생하니, 반드시 공통 컴포넌트를 제작하고 진행하는 것을 강력 권장하시더라구요.

4단계 : 이제 만들자. 페이지 구현

앞서 빌딩 블록 (컴포넌트)를 정확하게 만들었다면, 페이지 구현시에는 프롬프트가 매우 짧아질 것이며, 이것이 바로 체계적인 접근법의 진정한 위력이라고 최지호 대표님은 말씀하십니다.

정말 간단하죠? 앞에서 기초를 탄탄하게 만들어놓으니까 이렇게 쉬워지는 거더라고요.

5단계 : 애니메이션 효과 추가하기

완벽한 디자인 시스템, 깔끔한 컴포넌트, 일관된 테마, 모든 것이 갖춰졌는데도, 뭔가 아직 마음에 들지 않는다면, 바로 애니메이션이 빠졌기 때문입니다. 디자인에 킥을 주는 애니메이션을 추가해보시죠.

최지호 대표님이 추천하는 애니메이션 효과를 쉽게 구현하는 방법은 아래와 같습니다.

1. Unicorn Studio : 웹기반 노코드툴로 히어로 섹션에 화려한 움직임을 추가하는데 유용합니다.

2. Framer Motion : 애니메이션을 추가할 수 있는 라이브러리로서, API가 복잡하지만, AI가 쉽게 구현할 수 있습니다.

3. GSAP : 타임라인 애니메이션에 효율적인 라이브러리로 Framer Motion으로 해결되지 않는 부분에 사용해보세요

4. Tweak CN : 원클릭 테마 변경의 마법을 경험해볼 수 있습니다. global.css를 수정함으로써 다양한 테마로 디자인을 변경해보세요.

이제, AI를 어떻게 다뤄야하는가?

지금까지 잘 따라오셨다면 "AI가 디자인을 못하는 이유?"라는 질문은 잘못되었다는 것을 알아채셨을거에요. 이제, 우리가 해야하는 질문은 "AI를 어떻게 다뤄야하는가?"입니다.

우리는 우리가 결정해야하는 요소들을 너무 많이 AI에게 위임했던건 아닐까요?

할루시네이션 문제도 유사해요. 사람도 기억력의 한계가 있듯이, AI도 컨텍스트 윈도우가 부족하면 할루시네이션이 심해집니다. 전통적인 개발 방법론 중 이를 해결하기 위해 사람들이 시도했던 방법이 있어요. 바로 레이어 분리, 아웃포트 패턴 등 고도화된 아키텍처를 적용하는 것이죠.

바이브 코딩의 키워드가 Prompt Engineering, PRD, Execution Plan, Context Engineering 등으로 변화되어 왔는데, AI시대에 새로 만들어진 마법이 아니라 원래 개발자들이 하던 작업을 멋진 단어로 포장한 것에 불과해요.

taskmaster mcp, vooster.ai 같이 AI와 협업을 위한 툴의 공통점은 사용자에게 질문을 던져 이 프로세스를 역으로 유도하는 것입니다. 그것이 효율적인 의사결정을 돕는 방법임을 알고 있는거죠.

고도화된 아키텍처를 구현한다는 것은 수많은 문서를 생성하는 작업입니다. 예전같으면 엄두를 못내던 작업을 이제는 할 수 있어요. 왜냐하면, AI는 복잡한 작업을 빠르게 처리하는데 강점이 있으므로, 고도화된 아키텍처와 AI를 조합하면 단점을 상쇄하고 장점만 가져갈 수 있거든요.

그러니, 지속적인 학습을 통해 주도권을 확보하는 것이 중요하고, 일반인보다 개발자가, 주니어보다 시니어가 AI를 더 잘 활용할 것이라는 메시지로 최지호 대표님은 강연을 마무리하셨습니다.

마지막으로..

이번 강연을 듣고 깨달은건, AI시대에 우리의 역할이 더 중요해졌다는 것이에요. AI의 코딩 실력은 점점 더 향상되겠지만, 결국 시장은 사람의 니즈에 의해 형성되고, 이를 파악하고 개발하는 것은 사람이기에, 그 문제에 대한 솔루션은 사람이 기획하고, 그 솔루션을 더 정교하고 체계적으로 만들어 스케일러블한 프로덕트가 되는 것은 결국 사람의 역할이더라구요.

최지호님이 보여주신 4단계 워크플로우는 단순히 AI를 잘 쓰는 방법을 넘어 디자인 작업 자체를 체계화하는 방법론이었지만, 그 워크플로우 전체를 통과하는 철학은 결국 사람이 AI를 레버리지해야한다는 것, 그 핸들은 사람이 잡는다는 큰 깨달음이었습니다.

여러분도 오늘 내용을 참고로 함께 실험해보시면서 경험을 나누어보면 좋을 것 같아요. 또한, 보다 더 자세한 설명은 코드팩토리 유튜브 채널에서 확인하실 수 있습니다.

다음 주에는 이번 뉴스레터에 담지못한 뜨거웠던 Q&A 세션의 내용을 담아 전달해드리도록 하겠습니다.

추가로, 이번 뉴스레터에 담지못한 모든 상세 내용 및 프롬프트, 저의 실제 실행 예시를 공유받고 싶으시다면 구독 부탁드립니다. 이메일로 송부해드리도록 하겠습니다.