03
Renewal · Collaboration · Responsive
Logistong
홈페이지 리뉴얼
디자이너 2명, 퍼블리셔 1명인 본인, 개발자 1명과 협업하며 전체 페이지 퍼블리싱과 UI 인터랙션, 브라우저·기기별 QA를 담당했습니다.
01 · Overview
변경 요청과 반응형 화면을
함께 관리한 리뉴얼
전체 페이지를 퍼블리싱하면서 디자인 변경과 반응형 이슈를 Jira 작업 단위로 확인했습니다.
레이아웃의 공통 패턴을 먼저 확인하고 Jira와 Git으로 변경 내용을 관리하면서 Desktop과 Mobile 화면을 구현했습니다.
- Work Scope
- 전체 페이지 반응형 퍼블리싱
- Collaboration
- 디자인·개발 협업
- Issue Management
- Jira · Git
02 · Context / Problem
협업 과정에서 마주한 과제
- 01
이어지는 변경 요청
디자인 변경과 요청 사항을 확인하면서 기존에 구현한 화면에 미치는 범위를 함께 살펴야 했습니다.
- 02
화면별 반응형 차이
동일한 구성도 화면 크기에 따라 배치가 달라져 브레이크포인트별 표시 상태를 확인해야 했습니다.
- 03
이슈 단위의 협업
요청, 수정과 확인 사항이 섞이지 않도록 작업 내용을 구분하고 진행 상태를 공유할 필요가 있었습니다.
03 · My Role
퍼블리싱 담당 범위와
협업 범위
My Responsibility
전체 페이지 퍼블리싱·UI QA
- 디자인 산출물을 기준으로 전체 페이지 마크업
- 공통 레이아웃 패턴과 화면별 스타일 구현
- 브레이크포인트별 반응형 화면 적용
- JavaScript/jQuery 기반 UI 동작 구현
- Jira 이슈 확인과 Git 변경 사항 관리
Collaboration
디자이너 2명·개발자 1명과 협업
디자인 변경 내용을 확인해 화면에 반영하고, 개발 연동이나 추가 확인이 필요한 사항을 관련 담당자와 공유했습니다.
본인이 담당한 반응형 퍼블리싱 업무만 기술하며 팀 전체의 기획·디자인·개발 결과를 개인 성과로 표현하지 않습니다.
04 · Approach
변경 사항을 화면에 반영한 과정
- 01
요청 확인
디자인과 Jira 이슈를 기준으로 대상 화면과 변경 범위를 확인했습니다.
- 02
공통 패턴 분석
여러 화면에서 반복되는 레이아웃을 확인하고 공통으로 활용할 구조를 분류했습니다.
- 03
반응형 구현
화면별 콘텐츠를 마크업하고 브레이크포인트에 맞는 배치를 적용했습니다.
- 04
화면 점검
Desktop과 Mobile 구간에서 레이아웃과 UI 동작을 확인했습니다.
- 05
이슈 공유
수정 사항과 확인이 필요한 내용을 Jira로 공유하고 Git으로 소스를 관리했습니다.
05 · Project Screenshots
프로젝트 관련 화면
현재 보유한 이미지는 현재 서비스 화면으로, Logistong 구축 당시 화면과 차이가 있습니다.
06 · Result
프로젝트에서 완료한 범위
2023년 4월부터 6월까지 전체 페이지의 반응형 퍼블리싱과 변경 요청 대응을 담당했습니다.
- 전체 페이지의 Desktop과 Mobile 반응형 화면 구현
- 디자인 변경과 수정 요청을 화면에 반영
- Jira와 Git을 활용한 이슈 및 변경 사항 관리
07 · Tech Stack
사용 기술과 협업 환경
- Markup & Styling
- HTML5 · CSS3 · Responsive Web
- JavaScript & UI
- JavaScript · jQuery · UI Interaction
- Quality
- Breakpoint Review · 화면별 UI 확인
- Collaboration
- Git · Jira · Slack