저는 Figma를 한 번도 열지 않고 랜딩 페이지를 만들었습니다. 사용한 도구는 주로 Claude Design과 Claude Code였습니다. 제작 기간은 1주일이었고, AI와의 총 대화 횟수는 300회가 넘었습니다.
그 300회의 상호작용을 통해 깨달은 점은, 제작 행위 자체는 AI 덕분에 훨씬 쉬워졌지만 최종 결과물의 상한선은 여전히 사람의 판단력에 의해 결정된다는 것입니다. AI는 후보를 제시하는 모든 것을 처리합니다. 그 지점부터 의도한 톤으로 끌어올리는 것은 품질을 판단하고 수정을 요청하는 사람의 몫이었습니다.
저는 4가지 레이어(제약, 맥락, 검증, 평가)에 걸쳐 디자인을 다루는 프레임워크인 Design Harness의 문서 사이트를 구축했습니다. 디자인에 관한 사이트인 만큼, 표면적인 디테일과 상호작용을 얼마나 발전시킬 수 있을지도 부차적인 주제였습니다.
https://x.com/kgsi/status/2072829167285207077
실제 화면 캡처를 포함하여 제가 거친 단계와 그 300번의 상호작용이 어디에 사용되었는지 되돌아보겠습니다.
Claude Design과 Claude Code를 어떻게 다르게 사용했는지
저는 두 가지 주요 도구에 역할을 나누어 이 LP를 구축했습니다. Claude Design은 채팅으로 지시를 내리면 즉시 라이브 HTML 프로토타입이 생성되는 대화형 디자인 생성 도구입니다. Claude Code는 터미널에서 실행되며 코드베이스를 직접 구현하는 코딩 에이전트입니다.
역할 분담은 명확했습니다. Claude Design은 초기 프로토타입을 구성하는 데 탁월합니다. 이번에는 디자인 정책과 와이어프레임을 요약한 문서를 제공하고 몇 가지 질문에 답변한 후 첫 번째 LP가 출력되었습니다. 이 방법은 방향성을 시험하고 빠르게 시도해보는 단계에서 효과적입니다.
반면, 반응형 지원 및 접근성 세부 사항과 같이 프로덕션 품질로 끌어올리는 작업은 Claude Code로 정교화해야 합니다.
디자인은 Design으로 결정하고, 완성은 Code로 합니다. 저는 이 순서대로 사용했습니다.
제작 전 모든 것을 언어화하기
이 사이트를 만들기로 결정했을 때, 방향성은 이미 정해져 있었습니다. 제가 염두에 두었던 것은 "클래식한 해외 스타일의 톤에 현대적인 서체와 효과를 더하면 어떻게 될까"였습니다. 컨셉 자체는 Design Harness 문서에서 가져왔습니다.
Claude는 자체적으로 이미지를 생성할 수 없으므로, 이 부분은 ChatGPT Images 2.0에 맡겼습니다. 샘플 사이트 이미지에서 대체 아이디어를 도출하고, 만들고자 하는 사이트에 대한 무드 보드를 구축한 후 배경 이미지를 생성했습니다. '좋은' 방향성을 미리 모두 언어와 이미지로 정의했습니다. 이후의 모든 상호작용은 기본적으로 이에 대한 교차 검증이었습니다.
Codex(ChatGPT Image 2.0)로 시각적 톤 탐색, 다양한 이미지와 무드 보드 검색.
(최소) 수백 번의 상호작용을 통한 정교화
준비가 끝난 후, Claude Design과의 대화가 시작되었습니다. 스크린샷을 되돌아보면 총 200회 이상의 상호작용이 있었습니다(총 제작 기간은 약 1주일). 세션별 분석은 다음과 같습니다.
- "LP 사이트 생성 요구사항": 약 80턴
- "Design Harness 애니메이션": 약 80턴
- "KV 텍스트 배경 표시 애니메이션": 약 50턴
- "Design Harness 설명 개선": 약 10턴
특히 오프닝 로딩 애니메이션과 키 비주얼(KV) 효과에 많은 상호작용이 필요했습니다. 효과는 한 번에 완성되지 않았습니다. 아래에서 올라오는 효과, 블러 효과 겹치기 등 브러시업을 위해 지시를 계층적으로 추가했습니다.
Claude Design 캡처. 컨텍스트가 길어질수록 정확도가 떨어지므로, 중요한 작업마다 새 세션을 만들어 탐색했습니다.
별도로 Claude Code로 반응형 지원과 접근성을 정교화하고 있었기 때문에 총 300회 정도가 됩니다. 체감상으로는 Hero 섹션이 가장 많은 상호작용을 차지한 것 같습니다.
Claude Design에서 Claude Code로 전달할 때는 공유 기능을 사용했지만, "내보내기"를 통해 전체 zip 파일을 전달하는 것을 권장합니다. "보내기"가 더 쉽지만, 이미지 전송 제한이 있고 재현 정확도가 그렇게 높지 않습니다.
숫자만 보면 힘든 작업처럼 보일 수 있지만, 지시를 내리는 것 자체는 더 쉬워졌습니다. HTML과 CSS를 완전히 이해할 필요가 없습니다. Claude Design에는 화면의 요소에 직접 주석을 추가할 수 있는 주석 기능이 있습니다. 수정하려는 부분을 지정하면 거의 모든 세부 지시가 전달됩니다. 따라서 제가 한 지시는 대부분 세 가지 범주에 속했습니다.
주석으로 요소를 지정하여 세부 사항 수정. KV 텍스트 배경 표시처럼 움직임을 말로 전달. 톤을 "클래식한 해외 스타일"로 다시 정렬... 남은 유일한 필수 기술은 움직임과 톤을 언어화하는 능력입니다.
네비게이션을 예로 들어 대화 과정을 살펴보겠습니다.
처음에는 호버 시 밑줄이 슬라이드되는 효과였습니다. 이해하기 어려워서 참조 구현 URL을 제공하고 캐릭터 셔플링 효과로 변경하도록 했습니다. 그런데 셔플링 중에 문자 너비가 변경되어 메뉴 위치가 흔들렸습니다. 너비를 고정하도록 했더니 간격이 고르지 않게 되었습니다. "여전히 고르지 않다"고 다시 보냈지만 수정되지 않았습니다. 결국 너비를 조정하는 것을 포기하고 네비게이션 서체를 고정 너비 모노스페이스로 변경하여 해결했습니다. 문자 너비가 일정하면 셔플링 중에도 아무것도 움직이지 않습니다. 여기에 5번의 상호작용이 사용되었습니다.
300번의 상호작용은 대부분 이 순환의 반복이었습니다. 방향성을 보여주기 위해 참고할 사이트나 구현체의 URL을 제공. "간격이 더 이상 고르지 않다"처럼 나온 결과물의 불편함을 간략히 언어화하여 다시 보내기. 동일한 수정이 두 번 실패하면 미세 조정을 중단하고 전제를 변경했습니다. 결국 긴 명세서 문서를 작성하지는 않았습니다.
참고로, 이번에는 거의 사용하지 않았지만 Animation Vocabulary and Skills라는 문서가 있으며, 이를 사용하면 지시를 더 효율적으로 만들 수 있습니다. https://animations.dev/vocabulary
만드는 행위와 판단하는 행위
상호작용의 내용을 되돌아보면, 이는 나온 결과물의 품질을 판단하고 반복해서 다시 보내는 과정이었습니다. 만드는 행위 자체는 이제 거의 전적으로 AI가 처리할 수 있습니다. 지시를 내리면 즉시 후보가 나타납니다. 하지만 애니메이션 타이밍이 적절한가? 여백이 충분한가? 무엇이 좋고 무엇이 나쁜가? AI는 이것을 판단할 수 없습니다. AI가 한 번에 의도한 톤의 결과물을 출력하도록 만드는 것은 여전히 불가능합니다. 품질을 높이려면 판단하고 다시 보내는 수밖에 없습니다.
아마도 이것이 단순한 결과물이 이 수준의 품질에 도달하지 못하는 이유일 것입니다. 생성형 AI 도구를 사용하는 디자이너 13명의 세션을 관찰한 UC 버클리 정보대학의 연구는 결과물이 "고품질"로 보이지만 익숙한 스타일로 수렴하는 현상을 "컨버전스 트랩(Convergence Trap)" 이라고 부릅니다.
https://x.com/kgsi/status/2074250174986362999
다시 보내는 판단이 없다면, 결과물은 누구의 것도 아닌 평범한 깔끔함에 안주하게 됩니다. 300번의 상호작용 대부분은 그 지점에서 의도한 톤으로 다시 끌어당기는 데 사용되었습니다.
판단할 수 있는 사람에게는 어떤 일이 일어날까?
AI가 결국 이러한 미적 및 품질 판단을 완전히 처리할 수 있을 것이라는 견해가 있습니다. 어떤 분야에서는 그렇게 될 것이라고 생각합니다.
하지만 300번이 넘는 각 상호작용에서 불편함을 알아차리고 다시 보낸 것은 바로 저였으며, 그 과정에서 그것이 자동화될 조짐은 전혀 없었습니다. 물론 이는 하나의 LP를 구축한 n=1에 불과합니다. 다른 디자인 작업에서도 동일하다고 말할 수 있을지는 아직 모릅니다.
이 과정을 마치고 내린 제 예측은, 만드는 사람을 위한 "자리"가 줄어들 것이라는 점입니다. LP를 디자인하는 데 일주일이 걸리는 작업은 AI와 반나절 동안 대화하는 작업으로 대체될 것입니다. 그때 자리를 지키는 사람은 늘어선 후보들 앞에서 "오른쪽 제안으로 가되, 모션은 다시 해"라고 몇 초 만에 말할 수 있는 지식과 판단 기준을 가진 사람들일 것입니다. AI를 마스터하면서 판단할 수 있는 사람에 대한 수요는 오히려 증가할 것이라고 생각합니다.
디자이너가 연마해야 할 것은 손에서 눈으로 이동할 것입니다. 그 300번의 상호작용에서 내린 판단은 궁극적으로 제가 직접 손으로 만들어본 경험에 의존했습니다. 그렇다면, 만드는 횟수가 줄어드는 세상에서 눈만 개발할 방법이 있을까요?
참고로, "디자인" 기술을 습득할 수 있는 큐레이션 사이트 "Parascope"가 현재 성공적으로 운영되고 있습니다 👉 http://parascope.design/
