화면 기획서, 더 이상 그리지 말자.

내가 새 프로젝트를 기획하는데 제일 많은 시간을 들이는 파트는 기획서 작성이나 엔티티 명세, ERD를 그리는 파트가 아니다.

바로 화면기획서 작성이다.

나는 원래가 디자인 센스가 없어도 너무 없기로 유명한 사람이라서..ㅋㅋ

(옷도 뭐… 1년에 3벌은 사나?)

항상 AI에게 내가 생각하는 컨셉에 맞는 디자인 명세를 받고, 그 명세를 기반으로 Figma에 한 땀 한 땀 작업해서 만들었다.

지금 이제 운영을 막 시작하려는 한 프로젝트는 화면 기획서에 들어간 화면이 100개 정도 되는데, 이 화면을 모두 한 땀 한 땀 그리는데 거의 한 달을 다 썼던 거 같다.

그 이후에 코드로 해당 화면을 만들고 백엔드까지 모두 연동하는데 한 달을 쓴 걸 생각하면, “화면 기획” 자체가 내 프로젝트 개발 전체 타임라인의 **30%**는 우습게 차지하고 있는 것이었다.

그래서 고민했다.

어떻게 하면 이 “화면 기획” 시간을 획기적으로 줄일 수 있을까?

시간이 너무 소중한 1인 개발자 입장에서 이건 명백한 병목이자 리소스 낭비다.

서버비 몇 푼 아끼는 것보다 내 인건비 한 달 치를 아끼는 게 훨씬 이득 아니겠나?

발상의 전환: “그리지 말고 코딩하자”

가만 생각해보니 웃기더라.

내가 제일 잘하는 건 코딩인데, 왜 못하는 디자인 툴(Figma)을 붙잡고 끙끙대고 있지?

요즘 Cursor나 Antigravity 같은 AI 코딩 툴 성능이 미쳤다. 그래서 프로세스를 완전히 뒤집어보기로 했다.

• [기존 방식]: 명세서 텍스트 → 내 눈으로 읽고, 한 땀 한 땀 손으로 Figma 그리기
• [바꾼 방식]: 명세서 텍스트 → (AI가 HTML 코딩) → html.to.design → Figma 완성

즉, 디자인을 먼저 하는 게 아니라 임시 프론트엔드 코드를 먼저 짜서 디자인을 역산출하는 거다.

그냥 시키면 망한다 (시행착오)

처음엔 그냥 Cursor한테 디자인 명세를 그대로 던졌다.

결과는? 처참했다.

아이콘은 다 깨지고, 각각의 html 파일마다 크기도 제각각 폰트도 제각각에, 명세서에 없는 부분도 창조했다.

하지만 몇 번의 삽질 끝에, AI가 디자이너 흉내를 내게 만드는 3가지 골든 룰을 찾아냈다.

이거 알면 디자인 시간 1/10로 줄어든다.

장담한다.

① 전체 프레임(Wrapper) 크기 고정 (규격화)

AI는 기본적으로 웹 반응형을 고려해서 코드를 짠다.

이걸 그대로 Figma로 가져오면 크기가 들쑥날쑥해서 나중에 수정할 때 더 빡친다.

그래서 프롬프트 단계에서 뷰포트를 강제해야 한다.

“야, 딴 생각 말고 무조건 iPhone 기준 width: 375px, min-height: 812px Wrapper 안에서만 놀아.”

이렇게 규격을 박아두니 Figma로 import 했을 때 레이아웃이 칼같이 떨어진다.

② 공통 컴포넌트 선언

페이지마다 버튼 색 다르고 폰트 크기 다르면, 매번 디자인 파일을 옮길 때마다 내가 다시 수정하는데 시간이 더 오래 걸린다.

그래서 공통 컴포넌트를 먼저 짜게 시켰다.

1. theme.css 먼저 작성: 컬러 팔레트, 폰트 스타일, padding/margin 단계 정의.
2. Button, Chip, Card 같은 UI 컴포넌트 미리 정의.
3. 지시사항: “앞으로 모든 화면은 무조건 이거 import 해서 조립만 해. 딴 거 건드리지 마.”

이렇게 하니까 전체 앱 화면의 톤 앤 매너가 통일된다.

③ 이미지는 플레이스홀더 + 별도 생성

HTML 짜면서 이미지 묘사까지 시키면 AI가 멍청해진다. 속도도 느려지고.

그래서 철저하게 분리했다.

• 구조 잡을 때: 이미지는 그냥 회색 박스(div placeholder)로만 잡아.
• 리소스: 이미지는 Nano Banana 같은 이미지 생성 모델로 따로 고퀄로 뽑아.

구조는 구조대로 빠르게 뽑고, 이미지는 따로 박아 넣으니까 퀄리티와 속도 둘 다 잡았다.

결론: 미쳐버린 생산성

이 방식으로 새 프로젝트의 프로토타입 화면 20개 뽑는 데 딱 3시간 정도 걸렸다.

원래대로 내가 했으면 진짜 집중해야 30분에 1개 뽑는다.

이건 진짜 말이 안된다…ㅋㅋㅋㅋ

AI가 짜준 HTML을 html.to.design 플러그인으로 Figma에 툭 던져 넣으면 레이어 정리까지 깔끔하게 들어온다.

뭐 아직까지는 내가 원래 Figma를 그리는 스타일과는 많이 다르다.

(나는 원래 Frame 안에서 컴포넌트가 돌아다니는 걸 별로 안좋아 해서… Frame을 진짜 많이 쓴다.)

그래서 수정할 때 조금 열받긴 하지만, 그래도 이 정도면 아주 아니 진짜 미치도록 완벽하다.

이렇게 되니까 난 진짜 디자인도 외주 맡겨놓고 다른 기획을 동시에 할 수 있다.

너무 기분 좋은 주말이다.

마침.