02
Renewal · Responsive · Web Publishing
Wekeep
홈페이지 리뉴얼
자사 홈페이지의 전체 페이지를 단독 퍼블리싱하며 반응형 UI와 SCSS 스타일 구조, 공통 레이아웃을 구현했습니다.
01 · Overview
화면 리뉴얼과
이후 운영을 함께 고려
전체 페이지를 단독으로 퍼블리싱하면서 콘텐츠 추가와 변경에 대응할 수 있는 공통 구조를 고려했습니다.
리뉴얼 디자인을 기준으로 반응형 UI를 구현하고, 반복되는 레이아웃과 스타일을 SCSS 구조 안에서 정리했습니다.
- Work Scope
- 전체 페이지 단독 퍼블리싱
- Layout
- 반응형 웹
- Structure
- SCSS · 공통 레이아웃
02 · Context / Problem
리뉴얼에서 확인한 과제
- 01
모바일 대응
기존 정적 화면을 다양한 화면 크기에서 읽고 사용할 수 있도록 반응형 레이아웃으로 다시 구성해야 했습니다.
- 02
분산된 스타일 구조
페이지별 스타일을 리뉴얼 화면에 맞춰 정리하면서 반복되는 규칙을 공통 구조로 묶을 필요가 있었습니다.
- 03
콘텐츠 변경 대응
리뉴얼 이후에도 콘텐츠 추가와 변경이 이어질 수 있어 재사용할 수 있는 레이아웃 기준이 필요했습니다.
03 · My Role
퍼블리싱 담당 범위와
협업 범위
My Responsibility
전체 페이지 단독 퍼블리싱
- 리뉴얼 전체 페이지의 디자인을 기준으로 마크업
- SCSS 스타일 구조와 공통 레이아웃 정리
- Flexbox와 Grid 기반 반응형 화면 구현
- JavaScript/jQuery 기반 UI 동작 적용
- 화면 크기별 레이아웃과 인터랙션 확인
Collaboration
디자인·개발 담당자와 협업
디자인 의도와 화면 상태를 확인하며 퍼블리싱을 진행하고, 개발 연동이 필요한 영역은 담당자와 공유했습니다.
이 페이지는 본인이 담당한 퍼블리싱 범위만 설명하며 기획·디자인·개발 업무를 개인 성과로 포함하지 않습니다.
04 · Approach
리뉴얼 화면을 구현한 과정
- 01
디자인 확인
페이지별 콘텐츠 구조와 화면 크기에 따른 디자인 변화를 확인했습니다.
- 02
공통 구조 분류
반복되는 레이아웃을 공통 섹션으로 분류하고, SCSS 변수와 믹스인으로 스타일 규칙을 정리했습니다.
- 03
퍼블리싱 구현
HTML과 SCSS를 기반으로 페이지 구조와 반응형 레이아웃을 구현했습니다.
- 04
UI 동작 적용
필요한 인터랙션을 JavaScript와 jQuery로 적용했습니다.
- 05
화면 검수
Desktop과 Mobile 구간에서 레이아웃과 콘텐츠 표시 상태를 확인했습니다.
05 · Project Screenshots
Wekeep 참고 화면
보유한 Wekeep 홈페이지 참고 이미지입니다. 작업 당시 구현 화면인지 확인되지 않았습니다.
06 · Result
리뉴얼 프로젝트에서 완성한 범위
2022년 12월부터 2023년 1월까지 Wekeep 홈페이지의 전체 페이지를 단독으로 퍼블리싱했습니다.
- 리뉴얼 전체 페이지의 마크업과 스타일 구현
- Desktop과 Mobile을 고려한 반응형 레이아웃 적용
- SCSS 스타일 구조와 공통 레이아웃 정리
07 · Tech Stack
사용 기술과 협업 환경
- Markup & Styling
- HTML5 · CSS3 · SCSS · Flexbox · CSS Grid
- JavaScript & UI
- JavaScript · jQuery · UI Interaction
- Quality
- Responsive Web · 화면별 UI 확인
- Collaboration
- Git · Jira · Slack