Figma 한 번도 안 열고 홈페이지를 만들었다 — Stitch + Codex 조합기

홈페이지 디자인, 계속 미루고 있었대요. (뉴스레터 에디터가 이전 687회에서 직접 고백한 내용이에요.) 그러다 연휴 내내 OpenAI의 코딩 에이전트 Codex와 씨름하면서 홈페이지를 완성했다는 거예요. 근데 이 과정에서 Adobe 제품이나 Figma를 단 한 번도 열지 않았다고요.

이게 포인트예요. 툴을 얼마나 잘 쓰느냐는 더 이상 중요하지 않다는 말.

Stitch에서 시안을 뽑고, Codex에 코드를 던진다

핵심 워크플로우는 간단해요. Google Stitch(Gemini 3 Pro 기반)로 디자인 시안을 먼저 생성하고, 그 코드를 Codex에 넘기는 거예요.

이전 뉴스레터에서 Stitch Ideate를 써보다가 마음에 드는 Contact 페이지 시안이 나왔는데, 이걸 실제 홈페이지에 적용하고 싶어진 거죠.

시안을 선택한 뒤, .zip 파일로 내보내기해서 코드를 다운로드해요.

이 zip 파일을 Codex에 줍니다. Codex 사용법은 챗GPT랑 비슷한데, 프로젝트별로 폴더를 만들고 그 아래 쓰레드를 추가해서 작업하는 구조예요. 새 쓰레드의 프롬프트 입력창에 zip 파일을 업로드하고 프롬프트를 입력하면 돼요.

결과물을 보면, 바탕 컬러가 어두운 색으로 적용된 건 이미 Codex로 제작이 진행 중이었기 때문이고, 그 외 레이아웃 구성은 Stitch 시안과 거의 동일했어요. Codex가 코딩을 하고, 사람은 상세 텍스트만 수정하는 구조.

Contact 페이지 말고 메인 페이지도 같은 방식으로 만들었는데, Midjourney Prompt 이미지를 모아 볼 수 있는 피드 형태로 구성했다고요.

챗GPT 디자인은 별로, Stitch는 다르다

여기서 재밌는 비교가 나와요. 챗GPT에게 디자인을 시키면 마음에 들지 않는 경우가 많다는 거예요. 근데 Gemini 3 Pro 기반의 Stitch는 훨씬 나은 결과물을 만들어주더라고요. 그래서 Stitch로 시각적 스타일을 먼저 확인하고, 코드가 적힌 zip 파일을 Codex에 넘기니까 Codex도 원하는 스타일을 쉽게 이해한다는 거죠.

원하는 시안을 말로 설명하기란 어렵잖아요. 그래서 Stitch가 시각적 브리프 역할을 하고, Codex가 실행을 맡는 분업이 효과적이었다는 결론.

코딩을 몰라도 블로그 테마를 커스터마이징하는 세상

며칠째 Codex 작업만 하고 있다고 해요. 뉴스레터 발행 후 블로그에 아카이빙을 하는데, 이 블로그 테마를 커스터마이징하고 (전에는 코딩을 몰라서 할 수 없었던 일이에요), 홈페이지를 제작하고. 할 수 있는 일이 많아지다 보니 생각보다 재밌어서 자꾸 Codex만 만지작거린다고요. 솔직히 읽으면서 웃었어요. 이 감각 아시죠? 새 툴에 빠져서 헤어 나오지 못하는 그거.

근데 이것저것 작업해 보면서 느낀 게 있대요. 원하는 바가 명확해야 Codex와 작업하기 수월하다는 것. 필요한 게 무엇인지 알아차릴 수 있어야 하고, 한 번에 안 되더라도 집요하게 문제 해결을 하려는 끈기가 필요하다는 거예요.

결국 AI 시대에 남는 역량은 "만드는 능력"이 아니라 "판단하는 능력"이라는 이야기로 돌아가요. 기획, 개발, 디자인 모두를 이해할 수 있어야 하고, 만드는 건 AI가 하니까 사람은 결과물을 판단할 수 있는 취향과 배경지식이 필수적이라는 거죠.

Adobe와 Figma의 위기라고 느꼈다는 한 줄이 꽤 묵직해요. 물론 이 사람의 유스케이스가 개인 홈페이지이긴 하지만, Figma를 한 번도 안 열고 디자인-개발을 끝냈다는 사실 자체가 시사점이 있으니까요. 이게 지금 당장 모든 프로젝트에 적용 가능하냐고요? 그건 아직이에요. 근데 방향은 꽤 선명하잖아요.