외주·실무
멘토리 — 넥스트미션 프리랜서 작업
모바일 우선 멘토링 플랫폼의 반응형 웹 영역을 퍼블리싱한 작업입니다.
- 기간
- 2024.04 · 계약 1개월
- 작업 유형
- 퍼블리싱
- 역할
- 반응형 웹 퍼블리싱
- 문제
- 375px 모바일 시안을 넓은 화면으로 확장하면서 46페이지의 반복 UI와 동작을 일관되게 구현해야 했습니다.
- 해결
- 320–1280px의 콘텐츠 폭과 배치 기준을 정하고, 버튼·팝업·게시판·댓글을 공통 구조로 분리했습니다.
- 결과
- 메인·회원·멘토·커뮤니티·고객센터·체험 영역의 반응형 화면을 제작했습니다.
상세 목차 보기
문제
375px 모바일 시안으로 여러 페이지를 제작해야 했고, 태블릿과 넓은 화면의 콘텐츠 배치 및 반복 UI의 기준이 필요했습니다.
제약
- 2024.04 프리랜서 계약 1개월 중 주요 제작 기간 2주
- 메인·회원·멘토·커뮤니티·고객센터·체험 46페이지 담당, 마이페이지 제외
공개 업종
교육·멘토링 플랫폼 운영사
담당 범위
- 메인·회원·멘토·커뮤니티·고객센터·체험 영역 구현
- 마이페이지를 제외한 46페이지 퍼블리싱 · 계약 1개월 중 주요 제작 기간 2주
- 320–1280px 반응형 레이아웃 구현
- 오늘 하루 보지 않기 슬라이드와 버튼·댓글·답글 팝업 구현
핵심 결정
- 모바일 시안의 콘텐츠 구조를 분석해 최대 폭과 320–1280px 반응형 배치 기준 설정
- 버튼·팝업·게시판·댓글·답글을 공통 구조로 만들고 반복 동작을 Vanilla JavaScript로 분리
구현
- 공통 마크업·스타일과 반응형 기준을 적용해 각 영역의 화면 구현
- 오늘 하루 보지 않기 팝업, 슬라이드와 댓글·답글 팝업 구현
- 메인 화면과 공통 UI·게시판 예시를 작업 미리보기로 공개
공개 가능한 화면
검증 방법
- 320px·375px·태블릿·1280px 화면에서 레이아웃 확인
- 팝업·댓글·답글과 슬라이드 상호작용 점검
결과
- 46페이지의 반응형 퍼블리싱을 담당하고 공통 UI를 적용해 반복 제작 범위 축소
기술 기록과 근거
사용 기술
- HTML
- CSS
- Vanilla JavaScript
- Git