클래스 웹 · 개선 제안 2

갤러리 프로젝트 상세, 모달에서 전체 화면으로

현재 프로젝트 상세 모달은 이미지·영상이 작게 보인다는 VOC가 수집됨. 갤러리에서 프로젝트 클릭 시 같은 탭에서 전체 화면 [프로젝트 상세보기]로 진입하고, 세로형·가로형·정방형·영상 어떤 비율이든 미디어를 영역에 꽉 차게(여백 최소) 보여주는 안. 기존 기획서(curation_gallery 1-1~1-16)의 구성요소는 모두 유지하고 배치만 전체 화면에 맞게 재정렬함.

새 창·새 탭 없이 전체 화면 진입 모든 비율 영역 맞춤 기존 구성요소 1-1~1-16 유지 휠·핀치 확대 + 드래그

데모

프로젝트를 클릭하면 전체 화면 상세보기로 진입함. 좌우 큰 화살표(또는 방향키 ←→)로 다음·이전 작품으로 넘기고, 미디어 위에서 휠·트랙패드 핀치로 확대 후 드래그로 이동(더블클릭 = 원래 크기). 게시물별로 큐레이션 정보(1-1) 3가지 케이스, 미디어 여러 장(1-15·1-16), 영상 길이(1-14), 관리자가 숨긴 댓글(1-2·1-9-1 — 첫 게시물에서 숨김 해제·재숨김 동작 확인 가능), 본문 500자, 댓글 16개 스크롤이 각각 들어 있음. 상단 브레드크럼과 각 버튼은 클릭 시 이동 경로가 표시됨. ESC 또는 ✕로 복귀.

레이아웃 규칙

1 · 전체 화면 레이어 진입

갤러리에서 프로젝트 클릭 → 같은 탭에서 fixed inset:0 레이어(또는 라우트)로 전환. 상단 56px 바에 큐레이션 정보(1-1)·댓글 숨김 해제(1-2)·닫기(1-5) 배치.

2 · 미디어 영역 맞춤 (여백 최소)

미디어 스테이지 = 화면 − 상단바 − 우측 레일 − 좌우 92px(작품 넘기기 화살표 자리). 1280×800에서 가용 폭 776px. 기존 4:5 고정 대신 원본 비율 그대로 contain으로 표시(이번 개선의 핵심). 원본 해상도보다 크게는 늘리지 않고, 더 크게 볼 때는 확대 기능을 사용.

3 · 확대 — 휠·핀치 + 드래그

미디어 위에서 휠 또는 트랙패드 핀치로 커서 위치 기준 1~3배 확대, 드래그로 이동, 더블클릭·작품 전환 시 원래 크기. 영상은 재생 중에도 확대·이동 가능. 확대는 이미지에만 적용되고 화살표·인디케이터·영상 길이 뱃지는 함께 커지지 않음.

4 · 우측 레일 320px 3단 구조

[고정 헤더: 작성자 정보(1-3)·더보기(1-4)] + [스크롤: 본문(1-6) → 댓글 수 → 댓글 목록(1-7~1-9)] + [고정 푸터: 고정핀(1-10)·챌린지 상세(1-11)]. 본문 500자·댓글 다수에도 레일 안에서만 스크롤되고 미디어는 고정.

5 · 이동 화살표 2종 분리

다음·이전 작품 이동(1-7)은 스테이지 좌우 64px 큰 화살표(가장 자주 쓰는 조작이라 크게). 동일 게시물 내 미디어 이동(1-15)은 이미지 바깥 하단의 ◀ ● ● ▶ 컨트롤(1-16 인디케이터와 한 묶음) — 이미지 위에 겹치지 않아 작품을 가리지 않고, 확대 시 함께 커지지도 않음.

6 · 브레드크럼 이동

상단 아하오호 갤러리 › 큐레이션명 › 챌린지명은 모두 클릭 가능 — 갤러리(닫기) / 해당 큐레이션 화면 / 챌린지 상세 보기 모달로 이동. 자율창작은 챌린지명만, 나만의 프로젝트는 미표시(기획서 1-1 규칙 유지).