390×844 다중 화면 모바일 앱 UI 디자인: 프롬프트, 흐름, 리뷰
뷰포트와 흐름 규칙 없이 AI Agent에 모바일 앱을 요청하면 보통 데스크톱 웹페이지가 좁은 열에 끼워진 결과가 나옵니다. 작은 레이블, 상단에 치우친 네비게이션, 공간을 두고 다투는 중첩 카드 네 장입니다. 실제 모바일 UI는 390×844 뷰포트에서 시작하고 스크린마다 하나의 주요 작업에 집중하며 연결된 화면 3~5개를 나란히 검토합니다.
핵심 요점
- 390×844를 기준으로 디자인하고(워치는 198×242 등 기기별 뷰포트 사용) 주요 행동을 엄지손가락이 자연스럽게 닿는 곳에 배치하세요.
- 인터랙티브 index.html과 나란히 배치한 screens.html을 모두 전달해 목록에서 상세, 완료로 이어지는 흐름의 연속성을 한눈에 판단하세요.
- 조석 곡선 조정, 승차 핀 확인, 캡슐 토이 열기처럼 각 작품을 촉각적인 상태 변화 하나에 집중하세요.
- 390px 화면에서 가로 안쪽 여백을 낭비하는 중첩 카드 래퍼를 제거하세요.
npx skills add oil-oil/oil-ui/ko/inspiration/mobile-app-design/에서 30개 이상의 다중 화면 모바일 앱 데모와 프롬프트를 살펴 보세요.
모바일 앱이 좁은 웹페이지가 아닌 이유
1440px 데스크톱 모니터에서는 사이드바, 머리글 표시줄, 다중 열 그리드를 동시에 훑어볼 수 있습니다. 390×844 스마트폰 화면에서는 사용자의 엄지손가락 바로 아래 단계에 주의가 집중됩니다. 검색 표시줄, 프로모션 배너, 카테고리 pill 네 개, 2열 카드 그리드를 스마트폰 화면 하나에 쌓으면 모든 컨트롤이 답답해집니다.
Oil UI 갤러리의 모바일 작품이 각 화면에 어떻게 집중하는지 살펴 보세요. Tide는 타임라인을 드래그해 스웰 높이, 바람, 조석 곡선이 함께 움직이는 것을 보는 데 집중합니다. Pickup(ride)은 핀 확인, 운전자 접근, 주행 중 목적지 수정 전반에서 실시간 지도와 bottom sheet를 연결합니다. Pact(bank)와 Luma(sleep)는 장식용 위젯보다 타이포그래피와 여백을 우선합니다.
| 작품 및 모델 | 뷰포트 | 화면 1(진입) | 화면 2(핵심 상호작용) | 화면 3(결과 / 상태) |
|---|---|---|---|---|
| Tide 서핑 예보 (GPT 6.1 Sol) | 390×844 스마트폰 | 최적 시간대 안내가 있는 저장된 서핑 지점 | 한 지점의 7일 스웰, 바람, 조석 곡선 | 특정 시간을 살펴 보는 타임라인 조정 |
| Pickup 차량 호출 (Claude Sonnet 5.5) | 390×844 스마트폰 | 핀 확인 및 요금 견적 시트 | 차량과 번호판 확인이 가능한 실시간 운전자 도착 | 주행 중 목적지 변경 및 요금 재계산 |
| Luma 명상 및 수면 (GPT 6.1 Sol) | 390×844 스마트폰 | 수면 목표로 구성된 차분한 저녁 홈 | 활성 호흡 가이드와 오디오 재생 | 아침 수면 리듬과 지속 시간 요약 |
| Splitwater 수영 워치 (GPT 6.1 Sol) | 198×242 워치 | 수영 중(순수 검정, 거대한 레인 수 하나) | 햅틱 신호가 있는 풀 벽 휴식 카운트다운 링 | 크라운 회전 물 잠금 및 수영 후 요약(5개 화면) |
나란히 배치한 screens.html로 전체 흐름 검토하기
모바일 앱을 홈 화면 하나만으로 판단하면 끊어진 전환과 일관되지 않은 머리글 높이를 놓칩니다. Oil UI 워크플로에서 Agent는 모바일 작업에 두 가지 뷰를 생성합니다.
390×844의 인터랙티브 index.html
브라우저에서 네비게이션 탭을 탭하고 bottom sheet를 열고 슬라이더를 드래그하며 상태 전환을 직접 테스트할 수 있습니다.
핵심 화면 3~5개를 보여 주는 나란히 배치한 screens.html
진입 화면, 활성 상호작용 상태, 완료 상태를 하나의 캔버스에 나란히 배치해 전체 여정에서 타이포그래피 크기, 안전 영역 안쪽 여백, 색상 연속성을 확인할 수 있습니다.
스크린마다 고해상도 스크린샷 검증
각 390×844 화면을 DPR=2로 캡처해 탭 대상 크기(최소 44px), 하단 홈 인디케이터 여백, 레이블 줄 바꿈을 확인합니다.
모바일 앱 다중 화면 프롬프트 템플릿
Claude Code, Codex, Cursor에서 이 프롬프트 구조를 사용해 일관된 다중 화면 모바일 인터페이스를 생성하세요.
Oil UI를 사용해 [앱 카테고리, 예: 그룹 여행 일정 플래너 / 개인 예산 앱]을 390×844 모바일 뷰포트에서 디자인하고 구현해 줘.
- 핵심 작업 및 조작감: [대표 상호작용을 설명해 줘. 예: 경유지를 드래그해 하루 일정 순서를 바꾸면 이동 시간이 실시간 업데이트됨 / 두 번 탭해 지출을 기록하면 주간 한도 막대가 조정됨].
- 필수 화면 세 개:
1. 화면 1: [주요 보기, 예: 날짜별 여행 개요]
2. 화면 2: [활성 상호작용 상태, 예: 경유지 드래그 또는 비용 분담 시트 열기]
3. 화면 3: [완료 상태 또는 보조 상세 보기].
- 전달물: 인터랙티브 index.html과 세 화면을 모두 표시하는 나란히 배치한 screens.html을 모두 만들어 줘. 중첩된 데스크톱 카드 대신 엄지손가락이 닿는 범위와 전체 폭 모바일 위계를 고려해 디자인해 줘.프로덕션 앱이 React Native, Flutter, SwiftUI를 사용하더라도 먼저 HTML로 3개 화면 보드를 프로토타이핑하면 몇 분 안에 간격과 위계를 확정할 수 있습니다.
작동하는 갤러리 사례와 프롬프트
1440px 또는 390px의 실제 데모를 열어 모델과 프롬프트가 최종 인터페이스를 어떻게 형성했는지 살펴 보세요.
Tide
서핑 및 조석 예보 앱
서퍼를 위한 서핑 및 조석 예보 앱을 만드세요(390×844). 저장한 서핑 스폿 목록과 각 스폿의 오늘 및 향후 7일 파고, 주기, 풍향 및 풍속, 조석 곡선, 가장 좋은 시간대 추천을 제공합니다. 조석과 조건은 시간에 따라 바뀌므로 데이터 시각화가 핵심인 작품입니다. 타임라인을 드래그하면 파도, 바람, 조석이 함께 갱신되어야 합니다. 스폿 목록, 개별 스폿 상세, 타임라인을 특정 순간으로 드래그하는 상태를 디자인하세요. `index.html`과 세 화면을 나란히 배치한 `screens.html`을 전달하세요.
작품과 프롬프트 살펴 보기 →
Pickup
승차 호출 앱
승차 호출 앱에서 차량을 호출한 뒤의 화면을 만드세요(390×844). 지도에 접근 중인 차량, 운전기사와 차량 정보, 예상 도착 시간, 승차 후 여정 진행을 표시합니다. 실제 지도 스크린샷 대신 도로망과 경로를 코드로 그리세요. 차를 기다리는 순간은 가장 불안하므로 거리를 즉시 알아볼 수 있어야 합니다. 대기, 차량 도착, 여정 진행의 세 가지 상태를 캡처하세요. `index.html`과 세 화면을 나란히 배치한 `screens.html`을 전달하세요.
작품과 프롬프트 살펴 보기 →
Luma
명상 및 수면
잠들기 어려운 성인이 긴장을 풀고 잠들도록 돕는 앱을 만드세요(390×844). 영어 인터페이스로 취침 전 와인드다운 루틴, 유도 호흡 및 명상, 수면 사운드 믹스, 지난밤 수면에 대한 아침 리포트를 제공합니다. 호흡 유도가 핵심입니다. 4초 동안 들이쉬고 7초 동안 멈추고 8초 동안 내쉬는 것처럼 호흡 리듬에 맞춰 이미지가 확장되고 수축해야 합니다. 밤에 보기 편안해야 하며 아침 리포트는 지표를 쌓아 놓지 말고 밤사이 수면 상태를 한눈에 전달해야 합니다. 별이 빛나는 자주색 그라디언트와 달 일러스트 같은 진부한 표현은 피하세요. 와인드다운 루틴, 추천 트레이닝, 사운드 믹싱이 있는 Tonight 화면, 진행 중인 호흡 트레이닝, 입면 시간, 깸, 밤사이 수면 단계, 이번 주와의 비교를 보여 주는 아침 수면 리포트의 세 화면을 디자인하세요. `index.html`과 세 화면을 나란히 배치한 `screens.html`을 전달하세요.
작품과 프롬프트 살펴 보기 →
Pact
디지털 뱅킹
프리랜서와 젊은 전문직을 위한 디지털 뱅킹 앱을 만드세요(390×844). 영어 인터페이스로 잔액, 최근 거래, 이번 달 지출, 저축 목표, 카드 관리, 송금을 제공합니다. 은행명, 카드 디자인, 가맹점 로고는 모두 가상입니다. 송금과 카드 컨트롤이 핵심입니다. 수취인 선택, 숫자 키패드로 금액 입력, 송금 확인이 안심되면서도 효율적으로 느껴져야 합니다. 한 번 탭해 카드를 동결하면 상태 변화가 분명히 나타나야 합니다. 잔액, 최근 거래, 월 지출이 있는 Home, 카드 앞면, 동결 컨트롤, 한도, 비접촉 결제가 있는 Cards, 금액 입력부터 송금 성공까지의 이체 흐름을 디자인하세요. `index.html`과 세 화면을 나란히 배치한 `screens.html`을 전달하세요.
작품과 프롬프트 살펴 보기 →Oil UI Pro로 모바일 시트, 오류 복구, 촉각적 미니게임 다듬기
Oil UI Pro는 모바일 네비게이션 패턴, bottom sheet, 인라인 폼 복구, Klak(캡슐 토이), Ding! Mint Arcade(코인 푸셔), Gotcha!(크레인 게임) 같은 촉각적 앱과 미니게임을 위한 전문 레이아웃/상태 체크리스트를 다룹니다.
npx github:oil-oil/oil-cli install oil-ui-pro자주 묻는 질문
갤러리의 모바일 앱 사례가 화면 세 개 또는 다섯 개를 나란히 표시하는 이유는 무엇인가요?
정적인 홈 화면 하나만으로는 앱이 실제로 작동하는지 알기 어렵습니다. screens.html로 모든 핵심 화면을 나란히 렌더링하면 사용자가 시작부터 끝까지 어떻게 이동하는지 검사할 수 있고 실제 데모에서는 각 화면과 상호작용할 수 있습니다.
React Native, Flutter, SwiftUI 프로젝트에 Oil UI를 사용할 수 있나요?
네. 많은 팀은 Agent로 390×844의 빠른 3개 화면 HTML 방향 보드를 만들어 브라우저에서 레이아웃, 타이포그래피, 색상을 확정한 다음 승인된 방향을 SwiftUI, Flutter, React Native 컴포넌트로 옮깁니다.
Oil UI는 스마트워치, TV, 차량 디스플레이 같은 스마트폰이 아닌 화면을 어떻게 처리하나요?
물리적 시청 거리와 입력 하드웨어를 먼저 고려합니다. Yeying(1920×1080 TV 앱)에서는 리모컨 포커스 상태가 3m 밖에서도 분명하고, Yantu(1920×720 차량 화면)에서는 주행 중 회전 안내가 동적으로 커지며, Splitwater(198×242 워치)에서는 젖은 화면의 크라운 잠금 해제가 상태 모델에 포함됩니다.
모바일에서 가장 흔한 AI 레이아웃 실수는 무엇인가요?
390px 화면에서 안쪽 여백이 있는 카드를 안쪽 여백이 있는 컨테이너에 중첩해 실제 콘텐츠에 겨우 260px만 남기는 것입니다. 바깥 카드 상자를 전체 폭 섹션과 미묘한 구분선으로 바꾸면 화면이 즉시 넓어집니다.