1프로젝트 개요

라이더스 제휴사 모집을 위한 마이크로 사이트의 퍼블리싱을 담당하였습니다. 메인 소개 페이지와 제휴 제안 접수용 페이지로 구성되어 있으며, 브랜드 이미지 전달과 사용자 편의성을 고려한 반응형 웹 구현을 목표로 진행된 프로젝트입니다.

2주요 구현 내용

디바이스 해상도에 따라 자동으로 이미지가 전환되도록 구현하기 위해, jQuery로 img의 src를 attr로 변경하고 미디어쿼리를 활용하여 반응형에 대응하였습니다.

PC와 모바일 환경에 따라 Flexbox 레이아웃과 Swiper 라이브러리를 적절히 활용하여 반응형 구조를 효율적으로 구현하였습니다.

브라우저 기본 스타일을 제거하고, 디자인 시안에 맞게 커스터마이징 입력 필드, 라디오 버튼, 셀렉트 박스 등 전 요소에 사용자 친화적인 UI를 반영하였습니다.
전체 페이지의 시각적 통일성을 유지하기 위한 공통 컴포넌트 구조 적용 텍스트, 버튼, 간격 등 공통 요소에 대한 스타일 가이드 수립 및 적용하였습니다.

3작업 중 어려움 & 해결법

문제 초기 구현 시, 해상도별 이미지 대응이 부족해 모바일에서 이미지 크기나 위치가 어색하게 출력됨.
기본 HTML 폼 요소는 브라우저별로 스타일이 달라 프로젝트 전반의 UI 통일성이 무너지는 문제가 있었음.

해결 디바이스 크기를 조건을 걸어, jQuery로 img의 src를 attr로 변경하고 미디어쿼리로 이미지를 pc용 모바일용으로 교체하였습니다.
CSS 리셋과 함께 각 요소를 디자인 시안에 맞춰 완전히 커스터마이징하여 시각적 일관성과 사용자 편의성 확보하였습니다.

4결과 및 성과

5링크

프로젝트 바로가기 →