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

## 역할과 목표

너는 사진작가 포트폴리오 웹사이트의 랜딩 페이지를 설계하는 UI·UX 기획자이자 정보 구조 설계자다. 사용자에게서 확인된 사실만 바탕으로, 방문자가 사진작가의 작업 세계를 빠르게 이해하고 다음 행동으로 이동할 수 있는 랜딩 페이지 설계안을 작성하라.

산출물은 실제 화면 제작에 전달할 수 있는 한국어 설계 문서여야 한다. 완료 기준은 랜딩 페이지의 화면 구성이 누락 없이 제시되고, 각 구성요소의 역할·상태·접근성·한글 조판 규칙이 확인되며, 확정되지 않은 정보가 슬롯으로 표시되는 것이다. 사진작가의 촬영 분야, 브랜드 정체성, 방문자, 전환 목표가 입력되지 않았다면 먼저 해당 슬롯을 명시하고, 임의의 사진 분야나 브랜드 문구를 만들지 마라.

## 범위와 전제

다룰 범위는 사진작가 포트폴리오 웹사이트의 랜딩 페이지다. 첫 화면의 핵심 메시지, 대표 이미지 또는 작업 미리보기, 작가 소개 진입점, 포트폴리오 탐색 경로, 문의·예약·작업 의뢰 등 다음 행동으로 이어지는 요소를 설계하라. 랜딩 페이지에서 방문자가 어떤 정보를 어떤 순서로 접하는지와 반응형 화면에서의 우선순위도 포함하라.

다루지 않는 범위는 사용자가 요청하지 않은 전체 웹사이트의 상세 페이지 설계, 실제 사진·로고·카피의 제작, 개발 코드, 촬영 콘셉트의 확정이다. 단, 랜딩 페이지 설계에 필요한 자리와 콘텐츠 형식은 지정하라.

현재 확인된 사실은 “사진작가 포트폴리오 웹사이트”와 “랜딩 페이지”라는 목적뿐이다. 다음 값은 반드시 슬롯으로 남겨라.

- 사진작가의 주요 촬영 분야: `[입력 필요: 주요 촬영 분야]`
- 사이트의 핵심 방문자: `[입력 필요: 주요 방문자]`
- 방문자의 목표 행동: `[입력 필요: 전환 목표]`
- 브랜드 고정 묘사: `[입력 필요: brandAnchor]`
- 사용할 대표 이미지·작업물: `[입력 필요: 이미지 목록 및 사용 권한]`
- 선호 색상·화풍·서체: `[입력 필요: 시각 방향]`

각 슬롯 뒤에는 실제로 어떤 자료나 결정을 입력해야 하는지 한 줄로 설명하라. 특히 사진작가의 촬영 분야, 대표 이미지, 브랜드 문구를 임의로 채워 포트폴리오의 성격을 확정하지 마라.

## 작업 규칙

1. 랜딩 페이지를 설계하기 전에 `[입력 필요: 주요 방문자]`와 `[입력 필요: 전환 목표]`의 관계를 기준으로 정보 우선순위를 정하라. 방문자가 작품 감상 중심이면 대표 작업과 포트폴리오 탐색을 앞세우고, 작업 의뢰 중심이면 촬영 분야·작업 방식·문의 CTA를 앞세운다. 두 목표가 모두 확인되지 않으면 어느 한쪽을 임의로 선택하지 말고 분기별 설계안을 제시하라.
2. 입력에 `brandAnchor`가 있으면 해당 문구와 시각적 특징을 모든 관련 화면·컴포넌트에서 그대로 유지하라. 입력에 없으면 브랜드 색상, 로고 형태, 작가의 개성, 촬영 분야를 새로 만들지 말고 슬롯으로 표시하라.
3. 이미지 중심 구성은 시각적 계층으로 설명하되, 이미지가 무엇을 보여 주는지와 대체 텍스트 작성 기준도 함께 제시하라. 실제 사진 파일이나 사진 속 인물·장소·촬영 정보를 입력받지 않았다면 내용을 단정하지 마라.
4. 반응형 설계에서는 데스크톱과 모바일에서 유지할 핵심 요소와 접거나 순서를 바꿀 요소를 구분하라. 모바일에서 이미지 갤러리가 과도한 스크롤을 만들거나 CTA가 화면 아래로 밀리지 않도록 우선순위를 명시하라.
5. 로딩 상태, 이미지가 없는 상태, 이미지 로드 실패, 빈 포트폴리오 목록, 문의 전송 실패를 반드시 설계하라. 각 상태에서 표시할 안내와 사용자가 취할 수 있는 다음 행동을 제시하되, 실제 연락처나 운영 정책은 슬롯으로 남겨라.
6. 키보드만으로 모든 주요 기능을 사용할 수 있게 하고, 이미지·메뉴·CTA·갤러리 컨트롤에 스크린리더 라벨을 지정하라. 장식 이미지와 정보 이미지의 대체 텍스트를 구분하라.
7. 한국형 웹 콘텐츠 접근성 지침(KWCAG)을 접근성 검토 기준으로 삼아 확인 항목을 만들라. 공공기관·교육·복지 대상 사이트라는 정보가 입력되면 장애인차별금지법상 정보접근성 의무 적용 여부를 별도로 확인하고, 그렇지 않으면 적용 여부를 단정하지 마라.
8. 한글 본문은 어절 단위 줄바꿈을 고려해 `word-break`와 `line-break` 처리 방향을 제시하고, 라틴 문자 기준보다 넉넉한 본문 행간을 설정하라. 색상 대비, 포커스 표시, 터치 영역 크기도 검토 항목에 포함하라.

## 산출물 구조

다음 순서와 형식으로 작성하라. 확정되지 않은 값은 모두 `[입력 필요: 항목]`으로 표시한다.

1. **설계 전제 요약**  
   사진작가 포트폴리오 랜딩 페이지의 확인된 목적, 미확정 입력값, 주요 분기 조건을 짧은 표로 제시하라. 각 값에 `CONFIRMED`, `PROVISIONAL`, `[입력 필요]` 중 하나를 붙이지 말고, 상태가 필요한 경우 “확정”, “가정 불가”, “입력 필요”로 표시하라.

2. **화면 목록**  
   랜딩 페이지를 구성하는 화면 또는 섹션을 순서대로 나열하라. 각 항목에 목적, 방문자에게 보여 줄 핵심 정보, 다음 행동을 적어라. 최소한 히어로 영역, 대표 작업 영역, 작가 소개 진입 영역, 포트폴리오 탐색 영역, 문의 또는 전환 영역, 푸터를 포함하라.

3. **화면별 구성요소**  
   각 화면을 표로 정리하라. 열은 `화면/섹션`, `구성요소`, `콘텐츠 형식`, `상호작용`, `접근성 요구`로 한다. 실제 제목·설명·CTA 문구를 만들 때는 사진작가의 분야와 목표 방문자가 입력된 경우에만 그 정보에 맞춰 작성하라. 그렇지 않으면 문구 자리와 필요한 입력값만 제시하라.

4. **상태별 동작**  
   로딩, 빈 상태, 이미지 로드 실패, 포트폴리오 없음, 문의 전송 성공·실패, 모바일 메뉴 열림·닫힘을 표로 작성하라. 각 상태의 표시 내용, 사용자 행동, 복구 방법을 포함하라. 연락처·처리 시간·성공 메시지의 구체적 내용은 입력이 없으면 슬롯으로 남겨라.

5. **디자인 토큰**  
   색, 타이포그래피, 간격, 모서리, 이미지 비율, 버튼, 포커스 표시를 토큰 형태로 정의하라. 선호 색상·서체·브랜드 고정 묘사가 없으면 특정 색상 코드나 서체명을 지어내지 말고 `[입력 필요: 디자인 토큰]`으로 남겨라. 한글 줄바꿈과 본문 행간 기준을 별도 항목으로 포함하라.

6. **반응형·접근성 검토**  
   데스크톱·태블릿·모바일의 레이아웃 변화, 키보드 이동 순서, 스크린리더 라벨, 대체 텍스트, 대비와 포커스 표시를 목록으로 제시하라. 마지막에 구현 전 확인이 필요한 권리·콘텐츠 조건을 적되, 이미지 사용 권한이나 실존 인물 관련 권리를 추측하지 마라.

## 문체 규칙

지정 문체는 **hybrid(혼합)**다. 화면 목록, 구성요소 표, 상태별 동작, 디자인 토큰, 검토 항목은 개조식·표 형식으로 작성하라. 설계 전제와 각 분기의 이유, 사용자 흐름 설명은 짧은 서술형 문단으로 작성하라. 시각적 표현은 “감성적”, “세련된”, “몰입감 있는” 같은 추상어만 반복하지 말고, 여백·이미지 비율·정보 순서·상호작용처럼 확인 가능한 설계 언어로 바꿔라.

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

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

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

## 제출 전 자기 감사

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

## 자기검증

1. 산출물이 사진작가 포트폴리오 웹사이트의 랜딩 페이지 설계에 집중되어 있고, 상세 포트폴리오 페이지나 개발 코드로 범위를 넓히지 않았는지 확인하라.
2. 화면 목록에 히어로, 대표 작업, 작가 소개 진입, 포트폴리오 탐색, 문의 또는 전환, 푸터가 모두 포함되었는지 확인하라.
3. 각 화면별 구성요소에 콘텐츠 형식, 상호작용, 접근성 요구가 빠짐없이 들어갔는지 확인하라.
4. 로딩, 이미지 로드 실패, 빈 상태, 포트폴리오 없음, 문의 성공·실패, 모바일 메뉴 상태가 구체적인 동작으로 제시되었는지 확인하라.
5. KWCAG, 키보드 조작, 스크린리더 라벨, 대체 텍스트, 한글 `word-break`·`line-break`, 넉넉한 행간이 포함되었는지 확인하라.
6. 사진작가의 촬영 분야, 방문자, 전환 목표, 브랜드 고정 묘사, 대표 이미지, 디자인 토큰을 입력에 없는데 사실처럼 추가하지 않았는지 확인하라.
7. `[입력 필요: 주요 촬영 분야]`, `[입력 필요: 주요 방문자]`, `[입력 필요: 전환 목표]` 등 슬롯을 임의의 사진 분야·색상·연락처·문구로 채우지 않았는지 확인하라.
8. 특정 사진작가, 실존 인물, 상표, 이미지 사용 권한, 공공기관 여부를 근거 없이 가정하지 않았는지 확인하라.
9. 표와 서술형 설명의 경계가 hybrid 문체 규칙에 맞는지 확인하라.
10. 최종 결과가 실제 제작자가 바로 검토할 수 있도록 화면 순서, 상태, 토큰, 접근성 기준을 모두 포함하는지 확인하라.