클래스 웹 · 개선 제안

챌린지 상세 보기 모달, 팝업에서 전체 화면으로

현재는 모달 안에 세로로 긴 카드를 끼워 넣어 뷰어가 작고, 기본 배율(1280×800)에서 UI가 잘림. 썸네일 클릭 시 같은 탭에서 전체 화면으로 전환하고, 앱 화면 구성(세로 카드)은 그대로 유지한 채 화면 높이를 전부 카드에 주는 안. 휠·트랙패드 핀치로 원하는 부분을 확대해 세부도 크게 볼 수 있음.

새 창·새 탭 없이 전체 화면 진입 100% 배율에서 잘림 없음 앱 화면 구성 유지 휠·핀치 확대 + 드래그

데모

챌린지 썸네일을 클릭하면 전체 화면 보기로 진입함. 우측 진행 단계로 4개 단계(개요·가이드 자세히 보기·기록하기·프로젝트 돌아보기)를 바로 이동할 수 있고, 스테이지 좌우 화살표는 단계 안의 페이지까지 순서대로 지나감(개요의 아하's Pick 3장 → 가이드 페이지 → 기록하기 → 돌아보기). 미디어 위에서 휠 또는 트랙패드 핀치로 확대(카드가 프레임을 벗어나 화면 전체를 사용)하고 드래그로 이동, 더블클릭하면 원래 크기로 복귀함. 개요에서 아하(캐릭터)를 누르면 말풍선 문구가 순차로 바뀜(Pick 슬라이드에서는 반응 없음). 아하's Pick 이동 화살표·인디케이터는 앱과 동일하게 이미지 안에 있고, 가이드 페이지 전환(◀ ▶)만 카드 바깥 하단에 둠. 가이드 이미지 좌상단의 사운드 on/off는 기본 off이며, 켠 뒤 페이지를 넘기면 이전 페이지 소리가 끊기고 새 페이지 소리로 바뀜(on 상태는 유지). ESC 또는 ✕로 복귀.

레이아웃 규칙

1 · 전체 화면 레이어 진입

썸네일 클릭 → 같은 탭에서 fixed inset:0 레이어(또는 라우트)로 전환. 상단은 56px 한 줄 바에 닫기·제목·탭 통합.

2 · 앱 구성 유지 + 높이 우선 contain-fit

세로 카드의 구성·비율은 그대로 두고, 카드 높이 = 100dvh − 56px − 여백으로 화면을 꽉 채움. 높이·폭 어느 쪽이 모자라도 잘리지 않고 통째로 축소 → 어떤 해상도·배율에서도 잘림 0. 기준 해상도 1280×800.

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

휠 또는 트랙패드 핀치로 커서 위치 기준 1~3배 확대. 확대 시 카드가 프레임을 벗어나 무대(뷰어 영역) 전체를 사용하고, 드래그로 이동, 더블클릭·화면 전환 시 원래 크기로 복귀. 카드 밖의 조작 요소(화면 넘기기 화살표·스텝 이동·조작 안내)는 함께 커지지 않음.

4 · 조작 요소는 카드 밖에

가이드 스텝 이동과 아하's Pick 슬라이드 이동(◀ ▶)은 앱 화면 카드 안이 아니라 카드 바깥 하단에 배치 — 앱 화면 구성을 그대로 유지하고, 확대해도 함께 커지지 않음. 조작 안내는 좌하단에 아이콘 + 항목별 한 줄로 상시 노출.

6 · 아하's Pick

개요 화면은 챌린지 썸네일 1장 + 아하's Pick 3장이 같은 영역을 슬라이드로 공유(Pick 1개 이상 지정된 챌린지에만 화살표 노출). 첫 슬라이드는 우측만, 마지막은 좌측만 노출하고, 아하의 설명글도 슬라이드에 맞춰 자동 전환. Pick 이미지 위에는 프로젝트 게시자의 프로필·닉네임을 표기하고, 이동 화살표도 앱과 동일하게 이미지 안에 배치(앱 UI이므로 카드와 함께 확대됨). 인디케이터는 현재 위치 표시 전용이며 클릭 조작이 없음.

4 · 이미지 비율 대응

가이드 스텝 이미지는 가로가 긴 것(1003×803)·세로가 긴 것(800×1000)이 혼재 → 이미지 박스 안에서 원본 비율 그대로 contain으로 수용(박스 크기는 고정, 이미지만 맞춤).

5 · 진행 단계는 우측 레일

진행 단계는 264px 우측 레일 고정. 단계 클릭으로 해당 화면 바로 이동. 수업 정보 탭에서는 레일 없이 문서가 화면 폭을 전부 사용.

7 · 수업 정보 탭

현행 2단 구성(좌측 키워드·역량·카테고리·난이도·준비물 / 우측 설명·목표·성취기준·추천·참고자료)을 유지하고 폭만 전체 화면으로 넓힘. 글 중심이라 휠은 위아래 이동, 트랙패드 핀치는 글자 확대로 분리하고, 확대는 transform 대신 zoom을 써서 줄바꿈이 다시 흐르도록 함.