375px 모바일 시안을 바탕으로 46페이지의 반응형 화면을 제작했습니다. 넓은 화면의 콘텐츠 폭과 배치를 함께 정하고, 여러 페이지에서 반복되는 UI와 동작을 공통 구조로 만들었습니다.

모바일 시안을 넓은 화면까지 확장

375px 기준의 Figma 시안을 분석하고 콘텐츠 최대 폭과 반응형 기준을 정했습니다. 이 기준으로 320px부터 1280px까지 대응하는 HTML·CSS를 구현했습니다.

2026.10.02 작업 미리보기 페이지에서 캡처했습니다.

넥스트미션 메인 작업 페이지

넥스트미션 메인 작업 페이지

메인 화면 · 회원가입·로그인 진입 화면

기간·범위·기술

반복되는 UI와 동작 정리

버튼·팝업·게시판·댓글·답글을 공통 구조로 만들었습니다. 오늘 하루 보지 않기 팝업, 슬라이드와 댓글·답글 팝업의 동작은 바닐라 JavaScript로 구현해 페이지마다 같은 요소를 다시 만드는 범위를 줄였습니다.

작업 이력은 Git으로 관리했습니다.

넥스트미션 게시판 공통 UI

넥스트미션 게시판 공통 UI

공통 UI 예시 · 게시판 UI 예시

기존 메인·공통 UI 캡처

추가 화면과 작업 페이지 목록