VUILD

이 레슨이 끝나면

와이어프레임이 무엇인지(디자인 빼고 구조만), 왜 컬러 시안 전에 그리는지 안다
vuild.kr PLAN 7단계에서 자동 생성된 화면별 와이어프레임을 검토했다
비개발자 검토 포인트 3가지(가장 중요한 버튼이 보이는가 / 입력 폼이 길지 않은가 / 모바일 그림이 같이 있는가)를 적용했다

와이어프레임이 뭐예요?

와이어프레임 = 화면 레이아웃 스케치예요. 색·폰트·이미지는 모두 빠지고, 박스·텍스트·버튼·입력 폼이 어디 있는지만 회색조로 그린 그림. 건축으로 비유하면 "3D 컬러 렌더링 전의 흑백 평면 스케치"예요. 왜 이걸 따로 그리나? 색·폰트·이미지가 들어가면 사람들이 그 디테일에 정신 팔려서 정말 중요한 "구조"를 못 봐요. 와이어프레임은 그 함정을 피하기 위한 단계예요.

단계	목적	언제 한 번 다듬을지
와이어프레임	화면의 구조·위치·우선순위만 결정	지금 (PLAN 7단계)
디자인 시안	색·폰트·이미지를 입혀 컬러 mockup	Ch.4-10 (BUILD: 디자인 적용)
진짜 화면	코드로 만들어진 실제 화면	Ch.4-9 이후 (localhost)

🎨 생성 (Codex CLI) — 와이어프레임 → 디자인 시안 → 진짜 화면 3단계 진화 다이어그램. 좌(흑백 박스) → 중(컬러 mockup) → 우(브라우저 스크린샷). — 와이어프레임은 "구조만" 결정하는 단계예요.

옆 탭에 PLAN 7단계 열기

옆 탭 주소

https://vuild.kr/projects/[본인프로젝트번호]/plan/wireframes

처음 들어가면 자동으로 화면별 와이어프레임이 생성돼 있거나, "와이어프레임 생성하기" 버튼이 보여요. AI는 블루프린트의 페이지 리스트를 base로 화면 한 개씩 와이어프레임을 만들어요. 보통 5~8개 화면이 한 페이지에 그리드로 나타나요.

📷 캡쳐 — wireframes index 화면. 화면별 와이어프레임 5~8개가 그리드로 나열. — 화면 한 개 카드를 클릭하면 와이어프레임 상세가 떠요.

비개발자 검토 포인트 3가지

와이어프레임은 회색조 박스 + 텍스트 라벨이라서 처음 보면 "이게 뭐가 좋은지" 잘 안 와요. 그래서 검토 포인트를 3가지로 한정할게요. 화면마다 이 3개만 자문하세요.

① 가장 중요한 버튼이 한눈에 보이는가

화면 한 장에 사용자가 가장 자주 누를 버튼(주요 CTA)이 한 개 있어야 해요. 그 버튼이 다른 요소에 묻혀 있지 않고, 화면 첫 인상에서 바로 눈에 띄는지 확인. 예: "책 추가" 화면이면 "저장" 버튼이 화면 가장 잘 보이는 위치(보통 화면 우하단 또는 폼 하단).

② 입력 폼이 너무 길지 않은가

가입 / 책 등록 같은 폼 화면에서 입력 칸이 5개 넘으면 사용자가 도망쳐요. 3개 이하가 이상적. 만약 더 많으면 "필수가 아닌 칸"을 빼거나 다음 화면으로 분리하세요. 예: 가입 시 "이름·이메일·비밀번호·전화번호·생일·성별·직업" 7개 → "이름·이메일·비밀번호" 3개로 줄임.

③ 모바일 와이어프레임도 같이 있는가

데스크톱 와이어프레임만 있고 모바일이 빠져 있으면 70% 사용자(모바일)를 놓치는 위험. 화면 한 개 카드 안에 데스크톱 / 모바일 두 가지 와이어프레임이 같이 있어야 해요. 모바일에서 가장 중요한 버튼이 손가락 닿는 위치(화면 하단 또는 가운데)에 있는지 확인.

📷 캡쳐 — 와이어프레임 한 화면 상세. 데스크톱(좌) + 모바일(우) 한 화면에 같이. CTA 버튼 위치 강조. — 데스크톱과 모바일을 같이 보세요.

🎨 생성 (Codex CLI) — 좋은 와이어프레임 vs 안 좋은 와이어프레임 비교. 좌(CTA 한 개·폼 3칸·모바일 같이) 우(CTA 묻힘·폼 7칸·모바일 없음). — 3가지 포인트만 체크하세요.

와이어프레임 다듬는 방법

방법	하는 일
화면 카드 ⋯ → "다시 생성"	그 화면만 새 버전으로 한 번 더 생성
AI Coach에 한 줄 요청	"가입 화면 입력 칸을 3개로 줄여서 다시 그려 줘" 같이
메모만 남기기	화면 카드에 본인 메모 — Ch.4(BUILD) 단계에서 본인이 다시 봄

⚠️ 와이어프레임 단계에서 너무 완벽하게 만들려 하지 마세요

와이어프레임은 "이대로 화면을 만든다"는 약속이 아니에요. "방향만 잡는 스케치"예요. 본격적인 디자인은 Ch.4-10에서 하고, 진짜 화면은 Ch.4 빌드 단계에서 만들어요. 지금은 3가지 포인트(CTA / 폼 / 모바일)만 체크하고 다음으로 넘어가세요.

실습 — 핵심 화면 3개만 검토

5~8개 화면 다 검토하면 시간이 너무 걸려요. 핵심 3개만 골라서 검토하세요.

회원가입 또는 로그인 화면 — 첫 인상
핵심 기능 화면 (Must 카드 1번) — 가장 자주 쓸 화면
홈 또는 대시보드 화면 — 재방문 사용자가 가장 먼저 보는 화면

이 3개에 검토 포인트 3가지(CTA / 폼 길이 / 모바일)를 적용하세요. 1화면당 30초 정도면 충분해요.

막히는 지점 — 미리 답

"흑백 박스가 너무 추상적이라 와닿지 않아요" → 정상이에요. 와이어프레임은 원래 그래요. 진짜 컬러 화면은 Ch.4-10에서.
"모바일 와이어프레임이 안 보여요" → 화면 카드 우상단 dropdown에 "데스크톱 / 모바일" 토글이 있어요. 둘 다 본인이 한 번씩 토글
"폼 칸을 줄였는데 비즈니스에 필요한 정보를 못 받아요" → "가입 폼은 짧게, 가입 후 프로필 입력 화면에서 마저 받기" 패턴 권장. 사용자는 이미 가입 완료 상태라 입력 잘함.
"AI가 만든 와이어프레임이 너무 비슷해 보여요" → 와이어프레임은 원래 비슷해요(박스만 있음). 진짜 차별화는 디자인 단계에서.

완료 체크리스트

☐ 화면별 와이어프레임 5~8개가 그리드로 보인다
☐ 핵심 3개 화면(가입 / 핵심 기능 / 홈)에 검토 포인트 3가지를 적용했다
☐ 가입 폼 입력 칸이 3개 이하다 (또는 본인이 명확한 이유로 더 많이 둠)
☐ 모바일 와이어프레임도 한 번씩 봤다

다음 단계 → 3-8 빌드킷 다운로드 + 셀프 리뷰

드디어 PLAN의 마지막 단계예요! 지금까지 만든 모든 자료(PRD / 기능 명세 / 블루프린트 / 디자인 토큰 / 유저 플로우 / 와이어프레임)를 "빌드킷 ZIP" 한 묶음으로 다운받아요. 그 안에 CLAUDE.md(Claude Code가 본인 프로젝트를 알게 해주는 파일)도 자동 포함돼요. 그리고 셀프 루브릭 5문항으로 PLAN 단계를 본인 기준으로 자가 진단해요.