<aside>

375px 모바일 시안을 320px~1280px 환경으로 확장한 46페이지 반응형 웹 프로젝트

많은 페이지에서 반복되는 버튼·팝업·게시판 구조를 공통 단위로 정리하고 바닐라 JavaScript로 기능을 구현했습니다.

</aside>

프로젝트 한눈에 보기

• 해결한 문제 · 375px 모바일 시안만 제공되어 태블릿과 PC 화면 규칙을 함께 정의해야 하는 상황
• 핵심 판단 · 페이지별 반복 구현 대신 버튼·팝업·게시판·댓글 구조를 공통 단위로 분리
• 구현 결과 · 46페이지를 320px~1280px 반응형 화면으로 제작

직접 맡은 일

• Figma 시안 분석과 HTML 구조 설계
• 반응형 기준과 콘텐츠 최대 폭 정의
• 공통 버튼·팝업·게시판·댓글·답글 UI 제작
• 바닐라 JavaScript 인터랙션 구현
• Git 기반 작업 이력 관리

대표 문제 해결

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

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

여러 페이지에서 반복되는 화면과 동작 정리

버튼·팝업·게시판·댓글·답글을 공통 구조로 만들고 바닐라 JavaScript로 동작을 구현했습니다. 같은 요소를 페이지마다 다시 만드는 범위를 줄였습니다.

결과

메인·회원·멘토·커뮤니티·고객센터·체험 영역의 46페이지를 제작했습니다. 마이페이지는 작업 범위에서 제외됐으며, 계약 기간은 1개월, 주요 제작 기간은 2주였습니다.