05 / 05 · AI-ASSISTED PRODUCT DESIGN

AI 시안 세 장을 실제 모바일 화면으로 옮기며 고친 것

GPT로 만든 시안 세 장을 놓고 색과 카드 배치를 비교했습니다. 이미지만 볼 때는 잘 드러나지 않던 문제가 구현 중에 나왔습니다. 필터를 펼치면 다른 조작을 가릴 수 있었고, 카드를 넘길 때는 메뉴와 설명이 함께 바뀌어야 했습니다. 첫 화면의 순서를 다시 정하고 상태별로 레이아웃을 확인한 과정을 담았습니다.

작성 PPStudio 운영자게시 2026-08-16검토 2026-08-16

FIELD EVIDENCE

초기 시안 세 장에서 비교한 배치

가을과 겨울의 점심먹개 홈 화면을 대비한 초기 AI 생성 레이아웃 시안 — **01 · 계절별 분위기 탐색**색과 장식은 달라도, 추천 카드와 필터가 한 화면을 차지하는 방식은 따로 검토해야 했습니다.

한국, 일본, 중국, 미국, 유럽 스타일의 점심 추천 앱을 비교한 초기 AI 생성 레이아웃 시안 — **02 · 스타일 방향 탐색**지역별 표현은 달라도, 첫 행동을 빠르게 만들 정보 순서는 별도의 제품 판단이 필요했습니다.

봄과 여름 분위기의 메뉴 추천 화면을 나란히 비교한 초기 AI 생성 레이아웃 시안 — **03 · 화면 구성 탐색**카테고리, 대표 메뉴, 후보, 필터를 한 화면에 놓을 때 어떤 요소를 먼저 읽게 할지 검토했습니다.

위 이미지는 GPT로 만든 점심먹개 레이아웃 탐색 시안이며 실제 서비스 화면이나 성능 결과가 아닙니다. 계절·스타일·카드 배치를 빠르게 비교하는 데 사용했고, 이후 실제 구현에서는 정보 순서와 조작 가능성을 별도로 검증했습니다.

FROM MOCKUP TO PRODUCT

보기 좋은 화면과 쓸 수 있는 화면은 다릅니다

초기 시안에는 큰 브랜드 제목, 음식 이미지, 카테고리, 추천 카드, 필터와 하단 탐색이 모두 들어 있었습니다. 이 단계는 제품의 분위기와 화면 구성 가능성을 빠르게 논의하기에는 유용했습니다. 다만 한 장의 정적인 이미지는 어떤 요소가 먼저 읽히는지, 사용자가 필터를 펼쳤을 때 다른 조작이 가려지지 않는지, 추천 결과를 넘길 때 정보가 함께 바뀌는지까지 답해 주지 못합니다.

구현에 들어가자 정보 순서를 정하는 데 시간이 더 들었습니다. 바로 고르고 싶은 사람은 퀵픽이나 대표 메뉴로 들어가고, 결과가 마음에 들지 않으면 후보 비교와 필터 조정으로 이어져야 했습니다.

시안의 계절감과 색 조합은 참고하되 화면 순서는 다시 잡았습니다. 대표 메뉴를 먼저 두고 퀵픽과 필터는 필요할 때 펼쳤으며, 결과 카드 뒤에는 후보 비교·검색·지도 찾기를 배치했습니다.

의도를 화면의 규칙으로 바꿨습니다

의도를 문장으로만 남기면 다음 구현에서 쉽게 흐려집니다. 그래서 홈 화면에는 빠른 선택, 대표 추천, 후보 비교와 상세 조정이라는 서로 다른 진입 경로를 두고, 어느 하나도 필수 입력이 되지 않게 했습니다. 간단히 고른 뒤에도 다시 추천하거나 조건을 바꿀 수 있어야 한다는 규칙입니다.

화면 크기에도 같은 원칙을 적용했습니다. 390 × 844는 운영 화면을 기록하는 대표 장면이고, 320px는 핵심 정보와 조작이 잘리지 않아야 하는 최소 폭입니다. 넓은 화면에서는 무조건 모든 요소를 키우지 않고 610 × 1150px 이상의 충분한 가용 공간에서만 앱 셸을 1.3배 확대합니다. 숫자는 보편적 정답이 아니라 현재 서비스의 콘텐츠 밀도와 조작 범위를 함께 확인해 정한 운영 기준입니다.

첫 화면은 빠른 선택을 허용하되 상세 조정을 강요하지 않기
추천 결과 뒤에도 후보 비교·검색·지도·재시도 행동을 남기기
브랜드 장식은 행동 요소보다 먼저 시선을 빼앗지 않게 하기
화면 크기별 보정은 임시 좌표값 대신 공통 레이아웃 규칙으로 관리하기

초기 탐색: AI 생성 레이아웃 시안 3종
대표 화면: 390 × 844 모바일
최소 검증 폭: 320px
넓은 화면 기준: 610 × 1150px 이상에서 1.3배

반복 수정을 견디도록 레이아웃의 책임을 나눴습니다

퀵픽, 필터, 결과 카드와 하단 내비게이션을 한 파일에서 조정하면 작은 간격 수정도 다른 화면에 영향을 줄 수 있었습니다. 점심먹개는 앱 셸, 홈 grid, 결과 영역, 보조 화면과 하단 탐색의 스타일 책임을 나누고, 화면별 컴포넌트·상태·CSS selector의 대응을 구조 맵에 기록했습니다.

이 분리는 AI가 레이아웃을 바꿀 때도 중요합니다. 특정 간격이나 카드 위치를 수정하기 전에 영향을 받는 화면과 상태를 찾을 수 있고, 한 번의 요청이 다른 탭이나 장애 화면을 우연히 바꾸는 일을 줄입니다. 실제 과정에서는 레거시 메뉴판과 개발 로그 화면, 사용하지 않는 상태를 제거하고 화면 조합과 도메인 상태의 경계도 다시 정리했습니다. 남은 화면에서 어떤 상태를 참조하는지 확인할 대상도 줄었습니다.

에이전트가 바꾼 화면은 브라우저에서 다시 판단했습니다

코드가 빌드된다고 레이아웃이 설계 의도대로 작동하는 것은 아닙니다. 자동 검사는 추천 상태, API 경계, 정적 문서 경로, 이미지와 접근성의 반복 항목을 맡고, 실제 브라우저 검사는 가로 넘침, 요소 겹침, 키보드 포커스, 작은 화면의 스크롤과 정보 밀도를 확인합니다.

특히 필터·퀵픽 확장, 결과 카드 전환, 메뉴판 실패와 유지보수 화면처럼 상태가 바뀌는 장면은 정적 시안으로 확인할 수 없습니다. 그래서 한 번의 작업은 먼저 구조 맵에서 관련 컴포넌트·상태·CSS를 확인하고, 해당 범위만 수정한 뒤 자동 검사와 브라우저 확인을 거쳐 다음 변경으로 넘어갔습니다. 다만 이 과정에 모든 실기기와 보조기기 검사가 포함된 것은 아닙니다.

‘깔끔하게’라는 요청에 빠져 있던 조건

AI에게 ‘더 깔끔하게 만들어 달라’고 요청하는 것만으로는 디자인 의도가 유지되지 않습니다. 무엇을 우선하고 무엇을 건드리지 말아야 하는지, 변경 후 어떤 조건을 확인해야 하는지가 있어야 같은 서비스 안에서 여러 번 수정할 수 있습니다.

점심먹개에서는 대표 메뉴를 먼저 보여 주고 필터는 필요할 때 펼치도록 순서를 정했습니다. 이 조건을 두고 수정하니 카드 간격을 바꾸는 작업과 탐색 순서를 바꾸는 작업을 구분할 수 있었습니다. 수정 뒤에는 좁은 창에서 필터를 열고 카드를 넘겨 두 동작이 여전히 가능한지 확인했습니다.

화면을 만들기 전에 사용자의 첫 행동과 다음 행동을 문장으로 정하기
시안의 분위기와 실제 조작 규칙을 같은 것으로 보지 않기
레이아웃 변경의 컴포넌트·상태·CSS 경계를 함께 확인하기
자동 검사 뒤 실제 화면에서 좁은 폭과 키보드 흐름을 다시 확인하기

시안보다 오래 남는 것

시안 한 장에는 필터를 펼친 모습이나 요청 실패 뒤의 화면이 담기지 않습니다. 점심먹개에서는 이 장면들을 구현하고 확인하는 일이 뒤따랐습니다. 다음 레이아웃 수정에서도 시안과 함께 해당 컴포넌트, 상태, 확인할 화면을 지정해 작업 범위를 잡으려 합니다.