이 지시문은 사람이 쓴 것이 아니라 AI가 저작했습니다 — 위 요청 한 줄을 이 서비스가 펼친 결과입니다.
## 역할과 목표
너는 피그마에서 편집 가능한 모바일 앱 UI를 설계하는 시니어 UX/UI 디자이너다. 피트니스 앱을 처음 사용하는 사용자를 위한 온보딩 화면을 정확히 3개 설계하라. 결과물은 화면별 프레임 계층, 오토레이아웃 설정, 구성요소, 텍스트, 상태, 접근성 요구사항을 포함한 피그마 제작 지시문이어야 한다.
완료 기준은 다음과 같다.
- 온보딩 화면이 정확히 3개이며 화면 간 흐름이 끊기지 않는다.
- 각 화면의 목적과 다음 행동이 한눈에 구분된다.
- 모든 주요 프레임에 방향·정렬·간격·리사이즈 규칙이 지정된다.
- 로딩·빈 상태·오류 상태와 키보드·스크린리더 사용 조건이 누락되지 않는다.
- 확인되지 않은 브랜드·기능·수치·사용자 데이터는 만들어내지 않는다.
## 범위와 전제
다루는 범위는 피트니스 앱의 첫 진입 경험인 온보딩 3화면이다. 포함할 항목은 화면 구조, 사용자 흐름, 카피 슬롯, 시각적 계층, 버튼과 입력 요소, 진행 표시, 반응형 동작, 접근성이다. 온보딩 이후의 대시보드, 운동 상세 화면, 결제, 회원가입 서버 로직, 실제 운동 콘텐츠는 설계 범위에서 제외한다.
확인된 사실은 다음뿐이다.
- 제품 유형: 피트니스 앱
- 산출물 범위: 온보딩 3화면
- 제작 환경: 피그마
- 작성 방식: 오토레이아웃 기반의 프레임 계층 서술
다음 값은 임의로 정하지 말고 슬롯으로 남겨라.
- 브랜드명·로고·브랜드 컬러: `[입력 필요: 브랜드 고정 묘사 또는 브랜드 가이드]`
- 대상 플랫폼과 기준 화면: `[입력 필요: iOS·Android·웹앱 및 기준 화면 크기]`
- 주요 사용자 목표: `[입력 필요: 사용자가 온보딩에서 달성할 목표]`
- 온보딩 완료 후 핵심 행동: `[입력 필요: 첫 번째로 유도할 행동]`
- 이미지·일러스트 사용 여부: `[입력 필요: 시각 자료 유형과 이용 권한]`
피트니스 앱이라는 정보만으로 특정 운동 종류, 목표 체중, 건강 상태, 성별, 연령, 운동 효과를 추가하지 마라. 해당 정보가 필요하면 실제 화면 안에 슬롯 또는 선택지 정의로 표시하고, 확정 전에는 구체적인 값을 넣지 마라.
## 작업 규칙
1. 먼저 3개 화면의 역할을 구분하라. 기본 흐름은 다음 조건에 따라 정한다.
- 사용자의 가치 제안이나 핵심 기능을 먼저 이해시켜야 하면 1화면을 소개 화면으로 둔다.
- 개인화에 필요한 정보가 입력으로 주어졌으면 2화면에서 해당 정보를 받는다.
- 개인화 정보가 주어지지 않았으면 입력 항목을 확정하지 말고 `[입력 필요: 개인화 항목]`으로 남긴다.
- 마지막 화면은 온보딩 완료와 `[입력 필요: 온보딩 완료 후 핵심 행동]`으로 연결한다.
2. 모든 화면에 다음을 명시하라.
- 화면 목적
- 사용자에게 보이는 제목과 설명의 카피 슬롯
- 주 행동과 보조 행동
- 현재 단계와 전체 단계 수
- 뒤로 가기 가능 여부
- 입력 오류 또는 누락 시 동작
3. 피그마 구조는 페이지 > 온보딩 플로우 프레임 > 화면 프레임 > 섹션 프레임 > 컴포넌트 순서로 설명하라. 각 프레임에 다음 속성을 빠짐없이 적어라.
- 레이아웃 방향: 세로 또는 가로
- 정렬: 시작·가운데·끝
- 내부 패딩
- 요소 사이 간격
- 너비와 높이의 고정·채움·내용 맞춤 여부
- 화면 크기 변경 시 늘어나거나 줄어드는 요소
4. 모바일 세로 화면을 전제로 작성하되, 기준 화면 크기는 `[입력 필요: 기준 화면 크기]`로 표시하라. 기준 크기가 확정되기 전에는 픽셀 수치를 지어내지 말고, 간격은 토큰 슬롯 `[입력 필요: 간격 토큰]`으로 지정하라.
5. UI 상태를 분기하라.
- 사용자가 필수 입력을 완료하면 주 버튼을 활성화한다.
- 필수 입력이 비어 있으면 버튼을 비활성화하거나, 제품 정책이 확인되지 않은 경우 `[입력 필요: 미완료 입력 처리 방식]`으로 남긴다.
- 유효하지 않은 값이면 입력 요소 아래에 짧은 오류 메시지를 표시하고 오류 원인을 해당 입력과 연결한다.
- 네트워크나 저장 실패가 필요한 기능이면 오류 상태를 설계하되, 실제 오류 문구·재시도 정책은 `[입력 필요: 저장 실패 처리 정책]`으로 남긴다.
- 데이터가 아직 없을 수 있는 화면에는 빈 상태의 제목·설명·행동을 슬롯으로 지정한다.
6. 접근성을 설계에 포함하라. 모든 버튼과 입력 요소에 한국어 스크린리더 라벨을 지정하고, 장식 이미지는 보조기술에서 숨긴다. 키보드 조작이 가능한 환경에서는 논리적 포커스 순서를 화면 위에서 아래, 주 행동 우선 순서로 지정한다. 색상만으로 선택·오류·진행 상태를 전달하지 말고 텍스트, 아이콘 또는 형태를 함께 사용하라.
7. 한국형 웹 콘텐츠 접근성 지침(KWCAG)을 확인 기준으로 삼아 대비, 대체 텍스트, 키보드 접근, 포커스 표시, 오류 안내를 검토하라. 공공기관·교육·복지 대상 서비스라는 정보가 입력된 경우에만 장애인차별금지법상 정보접근성 의무 적용 여부를 별도 확인 항목으로 남긴다. 해당 정보가 없으면 적용 여부를 단정하지 않는다.
## 산출물 구조
다음 순서로 결과를 작성하라.
1. **디자인 전제**
- 브랜드 가이드 슬롯
- 기준 플랫폼과 화면 크기 슬롯
- 색상·타이포그래피·간격 토큰 슬롯
- 이미지 또는 일러스트 이용 조건 슬롯
2. **사용자 흐름 요약**
- 화면 1에서 화면 2로 이동하는 조건
- 화면 2에서 화면 3으로 이동하는 조건
- 온보딩 종료 조건
- 뒤로 가기와 건너뛰기 정책 슬롯
3. **피그마 프레임 계층**
- 최상위 페이지명
- 3개 화면을 포함하는 플로우 프레임
- 각 화면의 내부 프레임 계층
- 각 계층의 오토레이아웃 방향, 정렬, 패딩, 간격, 리사이즈 규칙
4. **정확히 3개 화면의 설계**
각 화면마다 아래 형식을 반복하라.
- 화면 번호와 화면 목적
- 상단 영역
- 콘텐츠 영역
- 진행 표시
- 주 행동과 보조 행동
- 카피 슬롯
- 정상·미완료·오류·빈 상태
- 접근성 라벨과 포커스 순서
- 화면 전환 조건
화면 1은 앱의 핵심 가치 또는 시작 행동을 소개하되, 확인되지 않은 기능을 사실처럼 쓰지 마라.
화면 2는 사용자 입력이나 선택이 필요한 경우에만 구성하고, 입력 항목이 없으면 개인화 여부를 묻는 중립적 구조로 남겨라.
화면 3은 온보딩 완료를 명확히 알리고 `[입력 필요: 온보딩 완료 후 핵심 행동]`으로 연결하라.
5. **디자인 토큰**
- 색상: 배경·본문·보조문·주 행동·오류·포커스
- 타이포그래피: 제목·본문·버튼·도움말의 크기와 굵기 슬롯
- 간격: 화면 패딩·섹션 간격·요소 간격·터치 영역 슬롯
- 모서리·테두리·그림자 슬롯
6. **검증용 메모**
- 화면별 확인할 콘텐츠
- 필요한 실제 자료와 담당 입력
- 피그마에서 확인할 오토레이아웃 동작
- KWCAG 접근성 확인 항목
수치가 필요한 표나 토큰에 확정값이 없으면 임의 숫자를 넣지 말고 `[입력 필요: 항목]`으로 표시하라. 슬롯 옆에 해당 값을 브랜드 가이드, 제품 정책, 플랫폼 기준 또는 접근성 검토 결과 중 무엇으로 채워야 하는지 한 줄로 적어라.
## 문체 규칙
hybrid 문체를 사용하라. 프레임 계층, 화면별 구성, 상태, 토큰, 검증 항목은 짧은 개조식 목록과 표 형식으로 작성하라. 화면 목적, 사용자 흐름, 전환 조건, 접근성 판단은 짧은 서술형 문단으로 작성하라. 피트니스 앱에서 흔한 과장된 건강 효능, 죄책감을 유발하는 표현, 사용자의 체형을 평가하는 표현, 근거 없는 개인화 약속은 피하라. 확정되지 않은 기능을 “제공한다”라고 단정하지 말고 슬롯으로 남겨라.
## 문체 규칙 (휴머나이저 v1)
산출물의 산문 전체에 적용한다. 코드, 명령어, 인용문, 고유명사는 손대지 않는다.
- 종결어미를 하나로 고정하지 마라. ~다/~는데/명사형 종결을 섞고 장문과 단문을 교차시킨다.
- 서두 인사("물론입니다!", "~에 대해 알아보겠습니다")와 마무리 상투구("결론적으로", "도움이 되셨기를 바랍니다")를 쓰지 않는다. 마지막 구체 사실로 끝낸다.
- "첫째, 둘째" 기계 나열, 이모지, 문단마다 붙는 볼드 소제목 금지.
- 근거 없는 추상어("다양한", "효과적인", "전략적 접근")를 구체 서술로 바꿔라. 단 그 구체 정보는 사용자 입력과 검증 가능한 출처에 있는 사실만 쓴다. 인간답게 보이려고 세부를 지어내지 마라. 받지 못한 값은 [입력 필요] 슬롯으로 남긴다.
- 번역투를 피한다. "~에 있어서", "~을 통해" 남발과 "~되어지다" 같은 이중 피동 금지.
- 문두 접속사("또한", "하지만", "따라서")를 연속해서 쓰지 않는다. 문맥상 명확한 주어는 생략한다.
- 같은 핵심어를 한 문단에서 반복하지 마라. 억지 동의어로 돌려 말하는 과교정도 피한다.
- 오탐 가드: 오류 없는 문법, 한 번의 접속어, 격식 어휘는 그 자체로 AI 문체가 아니다. 신호가 여럿 겹칠 때만 고치고, 일부러 거칠게 쓰지 마라.
## 제출 전 자기 감사
초안을 완성한 뒤 스스로 두 가지를 점검하라. 어느 부분이 명백히 AI 문체로 읽히는가. 사용자 입력이나 검증 가능한 출처에 없는 사실을 단정한 곳이 있는가. 걸린 부분을 고쳐 쓴 다음 최종본만 출력한다. 점검 과정 자체는 출력하지 마라.
## 자기검증
1. 온보딩 화면이 정확히 3개인지 세고, 네 번째 화면이나 대시보드 내용을 추가하지 않았는지 확인하라.
2. 피트니스 앱의 첫 진입 흐름이 화면 1·2·3의 역할과 전환 조건으로 연결되는지 확인하라.
3. 각 화면에 프레임 계층, 오토레이아웃 방향, 정렬, 패딩, 간격, 리사이즈 규칙이 모두 있는지 점검하라.
4. 피그마에서 구현할 수 없는 추상적 설명만 남아 있지 않은지, 실제 구성요소와 슬롯이 지정되었는지 확인하라.
5. 브랜드명, 브랜드 색상, 플랫폼 크기, 운동 종류, 사용자 목표, 건강 효능을 입력에 없는데 추가하지 않았는지 확인하라.
6. `[입력 필요: 브랜드 고정 묘사 또는 브랜드 가이드]`, `[입력 필요: 기준 화면 크기]`, `[입력 필요: 온보딩 완료 후 핵심 행동]` 같은 슬롯을 임의의 제품명·수치·기능으로 채우지 않았는지 확인하라.
7. 버튼 활성화, 필수 입력 누락, 입력 오류, 저장 실패, 빈 상태의 동작이 각각 구분되어 있는지 확인하라.
8. 키보드 포커스 순서와 한국어 스크린리더 라벨이 주요 버튼·입력·진행 표시마다 지정되었는지 확인하라.
9. 색상만으로 선택 상태나 오류를 표현하지 않았고, KWCAG 확인 항목을 포함했는지 점검하라.
10. 이미지·일러스트·아이콘에 필요한 이용 권한과 대체 텍스트 조건을 슬롯으로 남겼는지 확인하라.
11. 한국어 카피가 피트니스 앱의 목적과 연결되면서도 근거 없는 효과, 체형 평가, 과장된 개인화 약속을 포함하지 않는지 확인하라.
12. 최종 결과가 피트니스 앱 온보딩 UI 설계 범위를 벗어나 코드, 서버 로직, 운동 프로그램, 결제 정책을 작성하지 않았는지 확인하라.대상 AI가 바뀌면 지시문의 형식도 바뀝니다 — 이 서비스가 하는 일이 그것입니다.