채용 과제
미래엔 초코타임 — 이벤트 페이지 퍼블리싱
Figma 시안을 바탕으로 이틀 안에 완성한 Vanilla JavaScript 이벤트 페이지 채용 과제입니다.
- 기간
- 2026.08.18–2026.08.19 · 2일
- 작업 유형
- 퍼블리싱
- 역할
- 너비 비례 레이아웃·인터랙션 구현
- 문제
- 제공된 Figma 시안을 이벤트 원페이지와 스크롤·영상·과목 탐색 동작으로 연결해야 했습니다.
- 해결
- 섹션별 마크업과 너비 비례 레이아웃에 Vanilla JavaScript·Swiper 인터랙션을 연결했습니다.
- 결과
- 2026.08.18–19, 이틀 동안 구현한 개인 채용 과제로 실제 화면과 소스를 공개합니다.
상세 목차 보기
문제
이미지 중심의 Figma 시안을 원페이지로 구현하면서 고정 메뉴 이동, 영상 재생과 과목 선택이 하나의 탐색 흐름으로 이어져야 했습니다.
제약
- 제공받은 시안과 에셋을 사용하는 개인 채용 과제이며, 브랜드 디자인 제작이나 회사 재직 중 수행한 실무와 구분합니다.
- 원본 CSS는 1920px 기준의 vw·최대 크기와 비율을 활용합니다. 모바일 전용으로 콘텐츠를 재배치하는 구현과 구분합니다.
공개 업종
이벤트 서비스
담당 범위
- 제공된 Figma 레이아웃·에셋 분석과 이벤트 원페이지 마크업 설계
- 화면 너비에 따라 크기·간격이 비례 조절되는 CSS 레이아웃 구현
- Vanilla JavaScript로 퀵 메뉴·진입 애니메이션·영상 재생 UI 구현
- Swiper를 활용한 과목 탭·설명·콘텐츠 영역 연결
핵심 결정
- 상단 고정 배너 높이만큼 이동 위치를 보정해 퀵 메뉴로 선택한 섹션을 표시
- IntersectionObserver로 진입한 요소에 애니메이션 클래스를 붙이고 관찰을 해제해 반복 재생 방지
- 과목 탭·설명·본문을 별도 Swiper로 구성하고 선택한 과목에 맞춰 연결
구현
- 퀵 메뉴: 클릭 이동 중 상태 변경을 제어하고 스크롤이 끝나면 현재 섹션의 선택 표시 갱신
- 영상: 썸네일 클릭 후 재생 UI를 표시하고 재생 요청이 실패하면 썸네일 상태로 복귀
- 과목 탐색: 이전·다음 버튼과 탭을 연결하고 활성 과목의 탭 이미지를 교체
공개 가능한 화면
검증 방법
- 작업 기록에서 2026.08.18–19 제작 기간과 마크업·CSS·JavaScript 담당 범위 확인
- 공개 원본 코드에서 고정 배너 높이 보정, 진입 1회 애니메이션, 영상 재생 실패 시 썸네일 복귀 처리 확인
- 현재 PC 구현 화면에서 퀵 메뉴의 과목 영역 이동과 국어→수학 슬라이드 전환 확인
결과
- 퀵 메뉴 이동·진입 애니메이션·영상 재생·과목 탐색을 포함한 이벤트 원페이지 구현
한계와 다음 개선
- 작은 화면에서는 비례 축소를 넘어 글자 크기와 콘텐츠 배치를 별도로 조정하는 레이아웃 개선이 필요합니다.
기술 기록과 근거
사용 기술
- Figma
- HTML
- CSS
- Vanilla JavaScript
- Swiper