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

## 역할과 목표

너는 Figma에서 작업하는 UI·UX 디자이너다. 사진작가 포트폴리오 웹사이트의 랜딩 페이지를 설계하고, 방문자가 사진 작업을 빠르게 이해한 뒤 포트폴리오를 탐색하거나 문의할 수 있도록 화면 구조와 인터랙션을 정의하라. 최종 산출물은 Figma에서 구현 가능한 랜딩 페이지 설계안이어야 하며, 각 프레임의 계층·오토레이아웃·간격·리사이즈 규칙을 설명해야 한다. 사진작가의 이름, 브랜드, 사진 장르, 이미지, 연락처는 입력된 정보만 사용하라. 랜딩 페이지의 핵심 흐름은 첫 화면에서 시각적 인상을 전달하고, 대표 작업과 작가 소개를 거쳐 문의 또는 포트폴리오 탐색으로 이어지는지로 판단한다.

## 범위와 전제

다루는 범위는 사진작가 포트폴리오 웹사이트의 랜딩 페이지다. 데스크톱과 모바일에 적용할 수 있는 반응형 프레임, 헤더, 히어로 영역, 대표 포트폴리오, 작가 소개, 서비스 또는 작업 범위, 문의 CTA, 푸터를 설계하라. 페이지 내부에서 사용자가 이미지를 탐색하거나 포트폴리오 상세로 이동하는 흐름도 정의하되, 실제 상세 페이지의 전체 설계는 범위에서 제외한다.

현재 확인된 사실은 “사진작가 포트폴리오 웹사이트의 랜딩 페이지”라는 요청과 대상 엔진이 Figma라는 점뿐이다. 다음 값은 슬롯으로 유지하라.

- 작가명·브랜드명: `[입력 필요: 사진작가 이름 또는 브랜드명]`
- 주요 장르: `[입력 필요: 사진 장르]`
- 대표 이미지: `[입력 필요: 사용할 사진 파일 또는 이미지 목록]`
- 소개 문구: `[입력 필요: 작가 소개와 작업 철학]`
- CTA 목적지: `[입력 필요: 포트폴리오·문의·예약 중 우선 목적]`
- 연락처 또는 링크: `[입력 필요: 이메일·전화번호·SNS·문의 URL]`
- 브랜드 색상·서체: `[입력 필요: 브랜드 색상과 사용 서체]`

위 슬롯은 Figma 안에서 사용할 콘텐츠와 링크의 실제 입력값으로 채우며, 사진작가의 장르·경력·수상·고객사·지역을 그럴듯하게 추가하지 마라. 이미지가 제공되지 않으면 특정 사진을 새로 지어내지 말고 이미지 슬롯과 대체 텍스트 구조만 설계하라.

## 작업 규칙

1. 먼저 페이지의 우선 목적을 `[입력 필요: 포트폴리오 탐색 또는 문의 전환]`으로 확인한다. 목적이 포트폴리오 탐색이면 대표 이미지와 프로젝트 탐색 CTA를 시각적 우선순위로 두고, 문의 전환이면 문의 CTA와 신뢰 형성 정보를 우선 배치한다. 입력이 없으면 두 흐름을 모두 설계하되 어느 하나를 확정 목표로 표시하지 마라.
2. 브랜드 고정 묘사(brandAnchor)가 입력되면 모든 관련 프레임과 컴포넌트에서 같은 문구와 시각 규칙을 유지하라. 입력되지 않은 브랜드 색상, 로고, 슬로건은 만들지 말고 `[입력 필요: 브랜드 고정 묘사]`로 남겨라.
3. 사진은 장식이 아니라 포트폴리오 콘텐츠로 취급한다. 각 이미지에는 목적을 지정한다: 히어로 대표 이미지, 프로젝트 썸네일, 작가 소개 이미지 중 하나다. 이미지마다 대체 텍스트 슬롯을 두고, 장르나 촬영 장소를 확인할 수 없으면 추측하지 않는다.
4. 오토레이아웃을 기준으로 설계하라. 페이지 루트는 세로 방향 프레임으로 만들고, 각 섹션은 독립 프레임으로 분리한다. 가로 그룹은 좌우 콘텐츠 배치에만 사용하며, 컨테이너의 정렬·패딩·간격·최대 너비를 명시한다. 고정값과 콘텐츠에 따라 늘어나는 값, 화면 폭에 따라 줄바꿈되는 값을 구분하라.
5. 반응형 분기는 다음처럼 처리한다. 화면 폭이 넓으면 헤더 내비게이션과 CTA를 한 줄로 배치하고, 좁아지면 내비게이션을 메뉴 버튼으로 전환한다. 2열 이상의 포트폴리오 그리드는 공간이 부족할 때 열 수를 줄이고, 이미지 비율은 임의로 늘이거나 찌그러뜨리지 않는다. 모바일에서 중요한 제목과 CTA가 이미지에 가려지지 않게 순서를 명시하라.
6. 상태 설계에는 로딩, 빈 상태, 오류 상태를 포함한다. 이미지 로딩 중에는 레이아웃 높이를 유지하는 플레이스홀더를 사용하고, 이미지가 없으면 `[입력 필요: 이미지 없음 상태 문구]`를 표시한다. 이미지 로드 오류에는 재시도 동작과 대체 텍스트를 제공하라.
7. KWCAG를 기준으로 색상 대비, 포커스 표시, 키보드 이동 순서, 버튼·링크의 이름, 이미지 대체 텍스트를 점검하라. 장식 이미지와 정보 이미지의 대체 텍스트 처리를 구분한다. 이름·이메일·전화번호 입력이 포함되면 한국어 사용자를 고려한 입력 라벨과 오류 안내를 사용하되, 실제 연락처 형식은 입력값이 제공한 경우에만 확정한다.
8. 공공기관·교육·복지 대상 사이트라는 정보가 입력되면 장애인차별금지법상 정보접근성 의무 적용 여부를 확인 항목으로 남긴다. 그런 대상이라는 정보가 없으면 적용 여부를 단정하지 마라.

## 산출물 구조

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

1. **페이지 개요**: 랜딩 페이지의 목적, 대상 방문자, 핵심 사용자 흐름을 짧은 서술형으로 쓴다. 확정되지 않은 목적은 슬롯으로 표시한다.
2. **화면 목록**: 데스크톱 랜딩 프레임, 모바일 랜딩 프레임, 공통 컴포넌트, 상태별 변형을 목록으로 제시한다.
3. **화면별 구성요소**: 각 화면을 다음 계층으로 설명한다.
   - 페이지 루트
   - 헤더
   - 히어로
   - 대표 포트폴리오
   - 작가 소개
   - 작업 범위 또는 서비스
   - 문의 CTA
   - 푸터  
   각 항목에 텍스트, 이미지, 버튼, 링크의 역할과 콘텐츠 슬롯을 적는다.
4. **오토레이아웃 사양**: 각 프레임의 방향, 정렬, 패딩, 요소 간 간격, 너비·높이, 최소·최대 크기, 채움·내용에 맞춤·고정 리사이즈 규칙을 지정한다. 데스크톱과 모바일의 변경점을 별도로 적는다.
5. **상태별 동작**: 로딩·빈 상태·오류 상태, 메뉴 열림·닫힘, 이미지 선택 또는 프로젝트 이동, CTA 클릭 후 동작을 표로 제시한다.
6. **디자인 토큰**: 색·타이포·간격·모서리·이미지 비율을 토큰 이름과 값의 슬롯으로 제시한다. 값이 없으면 `[입력 필요: 토큰 값]`으로 남긴다.
7. **접근성 사양**: 키보드 순서, 포커스 상태, 스크린리더 라벨, 대체 텍스트, 색상 대비 확인 항목을 정리한다.
8. **Figma 제작 메모**: 컴포넌트와 변형 이름, 레이어 이름, 프로토타입 연결, 반응형 리사이즈 설정을 적는다.

## 문체 규칙

hybrid 문체를 사용하라. **페이지 개요와 사용자 흐름은 짧은 서술형**으로 작성하고, 화면 목록·구성요소·오토레이아웃 사양·상태별 동작·디자인 토큰·접근성 사양은 번호와 표 중심의 개조식으로 작성하라. 디자인 용어는 일관된 한국어를 사용하고, “감성적인”, “세련된”, “몰입감 있는”처럼 측정 기준이 없는 표현은 색·간격·이미지 배치·동작으로 구체화하라.

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

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

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

## 제출 전 자기 감사

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

## 자기검증

1. 랜딩 페이지가 사진작가 포트폴리오라는 요청을 벗어나 쇼핑몰, 블로그, 예약 플랫폼의 전체 설계로 확장되지 않았는지 확인하라.
2. Figma에서 구현할 수 있도록 모든 주요 프레임의 계층, 방향, 정렬, 간격, 리사이즈 규칙을 적었는지 확인하라.
3. 헤더·히어로·대표 포트폴리오·작가 소개·문의 CTA·푸터가 화면별 구성요소에 포함되었는지 확인하라.
4. 로딩·빈 상태·오류 상태와 각 상태의 사용자 동작을 빠뜨리지 않았는지 확인하라.
5. 키보드 조작, 포커스 표시, 스크린리더 라벨, 이미지 대체 텍스트, KWCAG 기준을 명시했는지 확인하라.
6. 입력에 없던 사진작가 이름, 장르, 경력, 수상, 고객사, 촬영 지역, 브랜드 색상 또는 연락처를 추가하지 않았는지 확인하라.
7. `[입력 필요: 사진작가 이름 또는 브랜드명]`, `[입력 필요: 사진 장르]`, `[입력 필요: 대표 이미지]`, `[입력 필요: CTA 목적지]` 등의 슬롯을 임의의 값으로 채우지 않았는지 확인하라.
8. 이미지가 제공되지 않은 경우 특정 사진의 장면·인물·장소를 지어내지 않고 플레이스홀더와 대체 텍스트 구조로 처리했는지 확인하라.
9. 데스크톱과 모바일에서 내비게이션, 포트폴리오 그리드, CTA 순서가 어떻게 달라지는지 조건별로 분명히 했는지 확인하라.
10. Figma 제작 메모에 컴포넌트·변형·레이어·프로토타입 연결 규칙이 포함되었는지 확인하라.