블로그
기획과 화면 이야기를 남깁니다.
중고 거래 앱 화면설계 — 체크리스트가 거래를 망치지 않게
전체 IA에서 7개 대표 화면을 골라, 상태 증거·약속 조율·현장 확인을 다른 정보 밀도로 설계하는 가설을 정리합니다.
취향 커뮤니티 화면 — 체크인보다 테스트에서 구독이 먼저예요
체크인과 피드부터 그리면 구독이 장식이 돼요. 홈부터 내 모임까지 일곱 장을, 테스트에서 구독이 끊기지 않게 고른 이유로 쉽게 정리했어요.
필라테스 예약 화면설계 — 대기와 이용권 경계를 보이게
기존 회원용 필라테스 예약 MVP의 7개 모바일 화면을 정리했습니다. 대기 신청과 직접 확정, 이용권 차감과 출석 권한을 분리한 검증 전 화면설계입니다.
점심 공동배달 앱 화면설계 — 각자 결제하고 함께 받는 7개 화면
점심 공동배달의 핵심은 단체 주문이 아니라 개인 결제와 회차 성립을 함께 관리하는 일입니다. 7개 화면의 기능과 남은 검증 과제를 정리합니다.
출장 청소 앱 화면설계 — 범위와 추가요금을 먼저 맞추는 7개 화면
출장 청소 앱의 예약 범위와 추가요금 합의가 7개 화면에 어떻게 담겼는지 살펴봅니다. 기능정의와 화면 간 금액 일관성 등 검토 과제를 정리했습니다.
학원 상담 예약 앱 화면설계 — 7개 화면으로 끊어 본 예약의 앞뒤
학원 탐색부터 예약 취소까지 7개 화면을 따라가며, 화면 유형과 기능정의를 어떻게 연결하는지 정리했습니다.
스터디카페 화면설계 — 찾기·고르기·결제·QR이 같은 말이에요
좌석 화면만 예쁘면 결제·입실·취소 문구가 갈라져요. 스터디카페 화면 일곱 장에서 빈자리·돈 낸 자리·들어와 쓰는 자리가 이어지는지 확인해요.
상태 목업이 먼저다 — 피그마가 바이브 프로토타입을 치운 이유
피그마가 직접 말했다. 바이브 프로토타입은 개발·PM 정렬에 안 쓰였다. 상태 목업을 먼저 펼치고, 돌아가는 코드는 그다음입니다. 2026년 9월 정찰.
HTML 화면설계 다음에 Figma가 온다
HTML 화면이면 개발 미팅은 됩니다. 브랜드·투자 덱·하이파이까지 가면 Figma가 필요합니다. 클라비는 Figma를 대체하지 않습니다.
HTML 화면을 코딩 AI에 넘기는 법
코딩 AI에 넘기는 건 화면 HTML입니다. ZIP이나 코딩 도구로 보내되, 화면 목록은 사람이 확인해야 합니다. 운영 앱이 아닙니다.
기능정의 — 번호표가 개발 질문을 줄인다
스크린샷만 넘기면 완성된 순간만 보입니다. 번호표를 붙이면 개발 질문이 「이게 뭐예요」에서 「이 번호의 예외는요」로 바뀝니다. 공개 열람에는 패널이 없습니다.
화면설계 갤러리 — 남의 와이어를 먼저 보고 시작한다
말은 사람마다 다른 화면을 부릅니다. 공개 와이어를 먼저 보고, 내 화면은 로그인 뒤에 엽니다. 샘플 시작은 화면 복사가 아닙니다.