사진작가 포트폴리오 웹사이트 랜딩 페이지를 설계해 줘

## 역할과 목표

<지시>
너는 UX/UI 디자이너이자 웹 접근성 설계자다. 사진작가 포트폴리오 웹사이트의 랜딩 페이지를 설계하고, 실제 제작자가 화면 구조·콘텐츠 우선순위·상태별 동작을 구현할 수 있는 설계안을 작성하라. 사진작가의 촬영 분야, 브랜드 정체성, 작품 정보가 입력되지 않았다면 이를 추측하지 말고 슬롯으로 표시하라.

완료 기준은 다음과 같다. 방문자가 첫 화면에서 사진작가의 작업 성격과 다음 행동을 이해할 수 있어야 하며, 화면 목록·화면별 구성요소·상태별 동작·디자인 토큰이 빠짐없이 제시되어야 한다. 키보드와 스크린리더로 핵심 흐름을 이용할 수 있고, KWCAG와 한글 조판 조건을 설계에 반영해야 한다.
</지시>

## 범위와 전제

<맥락>
사용자 요청은 사진작가 포트폴리오 웹사이트의 랜딩 페이지 설계다. 따라서 첫 화면의 시각적 인상, 대표 작품 노출, 작가 소개, 작업 분류, 문의 또는 작품 탐색으로 이어지는 흐름을 다룬다. 데스크톱과 모바일에서의 반응형 우선순위도 포함하라.

다음 값은 확인되지 않았으므로 슬롯으로 남겨라.

- 촬영 분야와 주요 작품 유형: [입력 필요: 촬영 분야·작품 유형]
- 브랜드 고정 묘사: [입력 필요: 로고·색상·서체·고정 시각 요소]
- 최우선 전환 목표: [입력 필요: 작품 감상·문의·예약·SNS 이동 중 하나]
- 사용 가능한 작품 이미지와 메타데이터: [입력 필요: 이미지 목록·가로세로 비율·제목·설명]
- 구현 환경: [입력 필요: 웹 기술 스택·CMS·호스팅 환경]

사진작가의 경력, 수상 이력, 고객사, 지역, 작품명, 이미지 수, 브랜드 색상은 입력에 없으므로 채우지 마라. 해당 정보가 필요한 위치에는 슬롯과 함께 “무엇을 제공해야 하는지”를 한 줄로 적어라. 실제 사진이나 로고를 제공받지 못한 상태에서는 특정 이미지의 내용을 설명하거나 저작권 상태를 단정하지 마라.
</맥락>

## 작업 규칙

<지시>
1. 먼저 랜딩 페이지의 핵심 사용자 흐름을 정하라. 최우선 전환 목표가 입력된 경우 그 목표를 첫 화면과 주요 CTA에 반영하라. 입력되지 않은 경우에는 특정 목표를 임의로 고르지 말고, “작품 감상 우선안”과 “문의 우선안”을 분기해 각각의 차이를 제시하라.

2. 브랜드 고정 묘사인 brandAnchor가 제공되면 모든 화면과 디자인 토큰에서 같은 문구와 속성을 유지하라. 제공되지 않았다면 색상·서체·로고를 확정하지 말고 [입력 필요: 브랜드 고정 묘사]로 표시하라.

3. 화면을 판단할 때 다음 기준을 사용하라.
   - 첫 화면에서 사진작가의 정체성, 대표 작업, 다음 행동이 각각 식별되는가.
   - 작품 이미지가 많아도 시각적 계층과 탐색 경로가 유지되는가.
   - 이미지가 로드되지 않거나 설명이 부족해도 핵심 의미와 이동 경로가 남는가.
   - 장식보다 작품 감상과 문의 등 사용자의 주요 목적이 앞서는가.
   - 모바일 화면에서 이미지 비율, 텍스트 줄바꿈, CTA 터치 영역이 무너지지 않는가.

4. 반드시 로딩·빈 상태·오류 상태를 별도로 설계하라. 작품 이미지 로딩 중에는 레이아웃 이동을 막을 자리 표시자를 사용하고, 작품 데이터가 없으면 임의의 작품을 채우지 말고 필요한 자료와 대체 문구를 제시하라. 이미지 또는 문의 기능에 오류가 발생하면 사용자가 원인을 추정하지 않도록 상태 설명과 가능한 다음 행동을 함께 제공하라.

5. 키보드 조작 순서를 명시하라. 메뉴, 작품 카드, 필터, CTA, 닫기 버튼에 포커스가 도달해야 하며, 포커스 표시를 숨기지 마라. 모달이나 라이트박스를 사용할 경우 포커스 이동·초점 회수·Escape 종료 동작을 지정하라. 각 이미지와 아이콘에는 장식용 여부에 따른 대체 텍스트 또는 스크린리더 라벨 규칙을 적어라.

6. 한국형 웹 콘텐츠 접근성 지침(KWCAG)을 기준으로 접근성 확인 항목을 만들라. 공공기관·교육·복지 대상 사이트라는 정보가 입력되면 장애인차별금지법상 정보접근성 의무 확인을 별도 항목으로 표시하라. 그런 정보가 없으면 적용 여부를 단정하지 말고 [확인 필요]로 남겨라.

7. 한글 조판을 명시하라. 본문은 어절 단위 줄바꿈을 우선하고 `word-break`와 `line-break` 처리 방향을 지정하라. 본문 행간은 라틴 문자 중심의 기본값보다 넉넉하게 설정하되, 구체적 수치는 입력이나 디자인 시스템에 없으면 확정하지 말고 [입력 필요: 본문 행간]으로 남겨라. 이름·주소·전화번호 입력이 있다면 한국식 입력 형식과 오류 안내를 설계하라.

8. 이미지의 비율과 품질은 원본 정보에 근거해 정하라. 이미지 크기·해상도·파일 형식·성능 수치를 알 수 없으면 추측하지 말고 필요한 자료를 요청하라. 측정하지 않은 로딩 시간이나 성능 개선 수치를 주장하지 마라.
</지시>

## 산출물 구조

<출력형식>
다음 순서와 제목을 그대로 사용하라.

1. **설계 전제와 미확정 슬롯**
   - 입력에서 확인된 사실만 요약하라.
   - 위 슬롯을 표로 정리하고, 각 슬롯을 채우는 데 필요한 자료를 한 줄씩 적어라.

2. **화면 목록**
   - 랜딩 페이지를 구성하는 화면 또는 주요 구역을 우선순위 순으로 나열하라.
   - 최소한 히어로, 대표 작품, 작가 소개, 작업 분류 또는 탐색 구역, 문의·연락 CTA, 푸터를 검토하라.
   - 실제로 필요하지 않은 구역은 제외 사유를 적어라.

3. **화면별 구성요소**
   - 각 화면을 표로 제시하라.
   - 열은 `화면/구역`, `목적`, `콘텐츠`, `상호작용`, `접근성`, `반응형 처리`로 구성하라.
   - 사진작가의 실제 작품명·경력·브랜드 문구가 없는 경우 해당 셀에 슬롯을 넣어라.
   - 히어로와 대표 작품 구역에는 시각적 계층, 제목, 설명, CTA의 관계를 서술형으로 설명하라.

4. **상태별 동작**
   - 로딩·빈 상태·오류 상태를 표로 제시하라.
   - 작품 이미지, 작품 목록, 문의 양식 또는 외부 링크처럼 이 페이지에서 예상되는 기능별로 상태와 사용자 안내 문구를 분리하라.
   - 오류 문구는 원인을 과장하거나 기술 용어만 나열하지 말고, 재시도·뒤로 가기·대체 연락 방법 등 확인된 선택지만 제시하라.

5. **디자인 토큰**
   - 색·타이포·간격·이미지 비율·모서리·포커스 스타일·반응형 중단점을 구분해 제안하라.
   - 브랜드 정보가 없으면 확정값 대신 역할별 슬롯을 사용하라. 예: `[입력 필요: 주 색상]`, `[입력 필요: 본문 서체]`.
   - 토큰은 개조식으로 작성하고, 각 토큰이 사진 감상과 한글 가독성에 어떤 영향을 주는지 짧게 덧붙여라.

6. **접근성 및 구현 확인사항**
   - KWCAG 기준의 확인 항목, 키보드 순서, 스크린리더 라벨, 대체 텍스트, 명도 대비, 동작하는 포커스, 한글 줄바꿈을 포함하라.
   - 공공기관·교육·복지 대상 여부와 장애인차별금지법상 정보접근성 의무는 [확인 필요]로 표시하라.

7. **대안 흐름**
   - 최우선 전환 목표가 미입력일 때만 작품 감상 우선안과 문의 우선안을 나눠 제시하라.
   - 각 안에서 히어로 CTA, 대표 작품 배치, 문의 구역의 위치가 어떻게 달라지는지 설명하라.
   - 각 안의 장단점을 입력 사실에 근거해 비교하되, 어느 안이 최종안인지 임의로 결정하지 마라.
</출력형식>

## 문체 규칙

<지시>
문체는 hybrid로 작성하라. 화면 목록·구성요소·상태·토큰·체크리스트는 개조식과 표 중심으로 쓰고, 설계 전제·히어로의 정보 계층·대안 흐름의 이유는 짧은 서술형 문단으로 설명하라. 어조는 감각적이되 과장하지 않는 전문적 한국어로 유지하라. “감성을 자극한다”, “몰입감 있는 경험”, “세련된 느낌”처럼 구체적 근거 없이 반복되는 디자인 클리셰는 쓰지 말고, 시각적 효과를 말할 때는 배치·대비·여백·탐색 동작처럼 관찰 가능한 근거를 함께 제시하라.
</지시>

## 문체 규칙 (휴머나이저 v1)

산출물의 산문 전체에 적용한다. 코드, 명령어, 인용문, 고유명사는 손대지 않는다.

- 종결어미를 하나로 고정하지 마라. ~다/~는데/명사형 종결을 섞고 장문과 단문을 교차시킨다.
- 서두 인사("물론입니다!", "~에 대해 알아보겠습니다")와 마무리 상투구("결론적으로", "도움이 되셨기를 바랍니다")를 쓰지 않는다. 마지막 구체 사실로 끝낸다.
- "첫째, 둘째" 기계 나열, 이모지, 문단마다 붙는 볼드 소제목 금지.
- 근거 없는 추상어("다양한", "효과적인", "전략적 접근")를 구체 서술로 바꿔라. 단 그 구체 정보는 사용자 입력과 검증 가능한 출처에 있는 사실만 쓴다. 인간답게 보이려고 세부를 지어내지 마라. 받지 못한 값은 [입력 필요] 슬롯으로 남긴다.
- 번역투를 피한다. "~에 있어서", "~을 통해" 남발과 "~되어지다" 같은 이중 피동 금지.
- 문두 접속사("또한", "하지만", "따라서")를 연속해서 쓰지 않는다. 문맥상 명확한 주어는 생략한다.
- 같은 핵심어를 한 문단에서 반복하지 마라. 억지 동의어로 돌려 말하는 과교정도 피한다.
- 오탐 가드: 오류 없는 문법, 한 번의 접속어, 격식 어휘는 그 자체로 AI 문체가 아니다. 신호가 여럿 겹칠 때만 고치고, 일부러 거칠게 쓰지 마라.

## 제출 전 자기 감사

초안을 완성한 뒤 스스로 두 가지를 점검하라. 어느 부분이 명백히 AI 문체로 읽히는가. 사용자 입력이나 검증 가능한 출처에 없는 사실을 단정한 곳이 있는가. 걸린 부분을 고쳐 쓴 다음 최종본만 출력한다. 점검 과정 자체는 출력하지 마라.

## 자기검증

<지시>
제출 전에 다음 항목을 번호 순서대로 점검하고, 하나라도 충족하지 못하면 수정한 뒤 최종 설계안만 출력하라.

1. `사진작가 포트폴리오 웹사이트 랜딩 페이지`라는 요청 범위를 벗어나 별도 서비스나 전체 웹사이트 구축 계획을 과도하게 확장하지 않았는가.
2. 촬영 분야, 작품명, 경력, 고객사, 지역, 이미지 수, 브랜드 색상처럼 입력에 없던 사실을 추가하지 않았는가.
3. `[입력 필요: 촬영 분야·작품 유형]`, `[입력 필요: 브랜드 고정 묘사]`, `[입력 필요: 최우선 전환 목표]` 슬롯을 임의의 값으로 채우지 않았는가.
4. 화면 목록에 히어로·대표 작품·작가 소개·탐색 또는 분류·문의 CTA·푸터를 검토했는가.
5. 화면별 구성요소를 지정된 열의 표로 제시했는가.
6. 로딩·빈 상태·오류 상태를 작품 이미지와 페이지 기능에 맞춰 구분했는가.
7. 키보드 포커스 순서, Escape 동작, 스크린리더 라벨, 이미지 대체 텍스트를 실제 랜딩 페이지 요소에 연결했는가.
8. KWCAG와 한글 `word-break`·`line-break`·행간 조건을 포함했는가.
9. 공공기관·교육·복지 대상 여부와 장애인차별금지법상 정보접근성 의무를 확인 필요 상태로 남겼는가.
10. 색상·서체·간격·중단점에 측정되지 않은 성능 수치나 임의의 브랜드 값을 넣지 않았는가.
11. 사진 감상 우선안과 문의 우선안을 최우선 전환 목표의 입력 여부에 따라 분기했는가.
12. 개조식 영역과 서술형 영역의 경계가 실제 출력에서 확인되는가.
</지시>