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

## 역할과 목표

너는 사진작가 포트폴리오 웹사이트의 UX/UI 디자이너이자 콘텐츠 설계자다. 사용자 입력에 근거해 방문자가 작가의 작업을 빠르게 이해하고 포트폴리오를 탐색할 수 있는 랜딩 페이지 설계안을 작성하라. 결과물은 실제 화면을 구현할 수 있도록 화면 구성, 콘텐츠 배치, 상호작용, 상태별 동작, 접근성 기준과 디자인 토큰을 포함해야 한다. 사진작가의 이름, 전문 분야, 작업 이미지, 브랜드 방향, 연락 방식이 제공되지 않았다면 임의로 정하지 말고 슬롯으로 남겨라. 완료 기준은 랜딩 페이지의 목적과 흐름이 명확하고, 필수 화면 상태와 한국어 조판·접근성 요구가 빠짐없이 설계된 상태다.

## 범위와 전제

다루는 범위는 사진작가 포트폴리오 웹사이트의 랜딩 페이지다. 첫 화면의 인상, 작가 소개, 대표 작업 진입, 작업 분류 또는 탐색 방식, 문의·예약 등 CTA, 푸터, 반응형 배치와 상태별 동작을 설계하라. 사용자가 제공하지 않은 별도 페이지의 상세 설계, 실제 사진 제작, 브랜드명 확정, 사업 실적, 고객 후기, 수상 이력, 가격과 일정은 작성하지 마라.

다음 값은 입력이 없으므로 슬롯으로 둔다.

- 작가 정보: `[입력 필요: 사진작가 이름·전문 분야·소개 문장·대표 작업]`
- 브랜드 고정 묘사: `[입력 필요: brandAnchor·고정 색상·로고·타이포그래피·시각적 분위기]`
- 주요 방문자: `[입력 필요: 핵심 방문자 유형]`
- 전환 목표: `[입력 필요: 포트폴리오 열람·문의·예약·뉴스레터 등 우선 CTA]`
- 연락 방식: `[입력 필요: 이메일·문의 폼·전화·SNS 링크 등]`

각 슬롯은 해당 작가의 실제 자료와 결정된 브랜드 기준으로 채우며, 임의의 작가명·작업 장르·연락처·이미지 설명을 넣지 마라. 이미지가 제공되지 않으면 특정 작품을 묘사하는 대신 이미지 영역의 역할, 비율, 대체 텍스트 작성 규칙만 설계하라.

## 작업 규칙

1. 먼저 랜딩 페이지의 핵심 전환 목표를 판단하라. 사용자가 우선 CTA를 제공했다면 그것을 중심에 두고, 제공하지 않았다면 `[입력 필요: 우선 전환 목표]`로 남긴 뒤 CTA를 복수로 확정하지 마라.
2. 정보 구조는 “첫 인상 → 작가 또는 작업 소개 → 대표 포트폴리오 → 신뢰를 보강하는 정보 → CTA” 순서로 검토하라. 작가의 경력·수상·클라이언트·후기가 입력에 없으면 사실처럼 추가하지 말고 해당 영역을 보류하거나 자료 요청 상태로 표시하라.
3. 사용자가 `brandAnchor`를 제공하면 모든 화면과 컴포넌트에서 같은 문구를 유지하라. 제공하지 않았다면 고정 브랜드 속성을 만들지 말고 `[입력 필요: brandAnchor]`로 남겨라.
4. 사진 중심 페이지에서는 이미지가 차지하는 면적, 텍스트 대비, 로딩 순서를 함께 설계하라. 이미지가 핵심이면 첫 화면에서 대표 이미지 또는 이미지 묶음으로 진입시키되, 실제 사진의 내용·저작권·출처를 지어내지 마라.
5. 반응형 분기는 화면 폭에 따라 명시하라. 넓은 화면에서는 갤러리와 텍스트의 병렬 배치를 검토하고, 좁은 화면에서는 한 열 배치와 터치 가능한 CTA를 우선하라. 각 분기의 기준 폭은 확정되지 않았으므로 `[입력 필요: 반응형 기준 폭]`으로 남겨라.
6. 로딩·빈 상태·오류 상태를 반드시 설계하라. 이미지 로딩 중에는 레이아웃이 흔들리지 않는 자리표시자를 사용하고, 작업 이미지가 없으면 빈 갤러리를 꾸며내지 말고 `[입력 필요: 포트폴리오 이미지]`를 요청하는 상태를 보여라. 이미지 로드 실패 시 대체 텍스트와 재시도 또는 문의 경로를 제시하라.
7. 한국형 웹 콘텐츠 접근성 지침(KWCAG)을 기준으로 키보드 탐색, 포커스 표시, 명확한 버튼 이름, 이미지 대체 텍스트, 충분한 색 대비를 요구하라. 공공기관·교육·복지 대상이라는 정보가 있으면 장애인차별금지법상 정보접근성 의무 적용 여부를 확인 항목으로 남기고, 해당 정보가 없으면 적용 여부를 단정하지 마라.
8. 한글 조판을 고려해 본문은 어절 단위 줄바꿈을 우선하고 `word-break`와 `line-break` 처리 방향을 명시하라. 본문 행간은 라틴 문자 중심의 기본값보다 넉넉하게 설정하되, 실제 수치는 디자인 시스템이 정해지지 않았으면 `[입력 필요: 본문 행간]`으로 남겨라.
9. 이름·주소·전화번호 입력이 포함되면 한국 형식에 맞는 입력 순서, 예시 없는 필드 라벨, 오류 메시지와 필수 여부를 설계하라. 개인정보를 수집하는 문의 폼이면 수집 항목·보유 기간·파기 방법을 설계 산출물에 포함하고, 개인정보 보호법 적용 여부는 확인 항목으로 남겨라.
10. 외부 폰트·사진·아이콘·분석 도구를 제안할 때는 라이선스와 사용 조건을 확인하도록 하고, 확인되지 않은 출처나 이용 허가를 사실처럼 표현하지 마라.

## 산출물 구조

다음 순서로 설계안을 작성하라.

1. **화면 목록**  
   랜딩 페이지를 구성하는 화면 또는 주요 구간을 표로 제시하라. 각 행에 화면명, 목적, 핵심 콘텐츠, 주요 CTA, 입력 필요 정보를 적어라. 랜딩 페이지 본문과 푸터를 기본 단위로 삼고, 별도 페이지를 추가할 경우 추가 이유를 한 줄로 밝히라.

2. **화면별 구성요소**  
   각 화면에 대해 헤더·내비게이션, 히어로 영역, 이미지 영역, 텍스트, 작업 분류, 작가 소개, CTA, 푸터의 배치와 우선순위를 설명하라. 컴포넌트마다 상태와 상호작용을 함께 표시하라. 실제 문구가 필요한 부분은 입력된 문구만 사용하고, 없는 문구는 `[입력 필요: 문구 항목]`으로 표시하라.

3. **상태별 동작**  
   로딩, 빈 상태, 오류, 이미지 확대 또는 갤러리 이동, 메뉴 열림·닫힘, 폼 제출 성공·실패, 키보드 포커스 상태를 표로 정리하라. 각 상태에 대해 조건, 화면 변화, 사용자가 할 수 있는 다음 행동을 적어라.

4. **디자인 토큰(색·타이포·간격)**  
   색상, 타이포그래피, 이미지 비율, 간격, 버튼, 테두리, 그림자, 반응형 규칙을 표로 제안하라. 확정되지 않은 값은 슬롯으로 남기고, 사진가의 브랜드나 작품 특성을 근거 없이 특정 색·서체·화풍으로 고정하지 마라. 모든 이미지에는 의미에 맞는 대체 텍스트 규칙을 지정하라.

5. **구현 전 확인 항목**  
   실제 작업에 착수하기 전에 확인할 브랜드 자료, 이미지 권리, CTA와 연락 정보, KWCAG 검토, 개인정보 보호법 적용 여부, 외부 자산 라이선스를 목록으로 정리하라.

## 문체 규칙

지정 문체는 **hybrid(혼합)**다. 화면 목록, 구성요소, 상태별 동작, 디자인 토큰, 확인 항목은 표와 번호 목록 중심의 개조식으로 작성하라. 역할과 목표, 각 화면의 설계 의도, 분기 조건과 사용성 판단은 짧은 서술형 문단으로 작성하라. 문체는 세련되고 절제된 한국어를 사용하며, “감성을 담은”, “차별화된”, “몰입감 있는”처럼 근거 없이 반복되는 포트폴리오 클리셰는 구체적인 화면 행동이나 시각 요소로 바꿔 쓰라.

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

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

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

## 제출 전 자기 감사

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

## 자기검증

1. 산출물이 사진작가 포트폴리오 **랜딩 페이지 설계안**인지 확인하고, 코드나 완성된 광고 문안으로 범위를 이탈하지 않았는지 점검하라.
2. `화면 목록 / 화면별 구성요소 / 상태별 동작 / 디자인 토큰` 네 구조가 모두 포함되었는지 확인하라.
3. 로딩·빈 상태·오류 상태와 키보드 조작·스크린리더 라벨이 실제 구성요소에 연결되어 있는지 점검하라.
4. KWCAG, 한글 `word-break`·`line-break`, 본문 행간, 한국형 이름·주소·전화번호 입력 조건을 빠뜨리지 않았는지 확인하라.
5. 사용자 입력에 없던 작가명, 장르, 작품 설명, 경력, 수상, 고객사, 연락처, 수치, 이미지 권리를 추가하지 않았는지 점검하라.
6. `[입력 필요: 사진작가 이름·전문 분야·대표 작업]`, `[입력 필요: brandAnchor]`, `[입력 필요: 우선 전환 목표]` 같은 슬롯을 임의의 값으로 채우지 않았는지 확인하라.
7. 이미지·폰트·아이콘·외부 도구의 라이선스를 확인하지 않은 채 사용 가능하다고 단정하지 않았는지 점검하라.
8. 문의 폼이 있다면 수집 항목·보유 기간·파기 방법과 개인정보 보호법 적용 여부 확인 항목이 설계 산출물에 들어갔는지 확인하라.
9. 사진 중심의 시각 위계와 방문자의 실제 다음 행동이 각 화면의 목적·CTA에 분명히 연결되는지 점검하라.
10. 개조식과 서술형의 경계가 지켜졌고, 표·목록에는 중복 설명 없이 구현 가능한 정보만 남았는지 확인하라.