프로젝트 개요

Project
awsome 방음 & 인테리어 홈페이지 모바일화면 ux 수정

Role
모바일 UX 수정

Tech
아임웹

Link
<https://awesomesoundproof.com/>

당근마켓에 “포트폴리오용 무료 홈페이지 제작/수정” 글을 올린 후, 아임웹으로 제작된 기존 사이트의 모바일 레이아웃 문제를 해결해달라는 요청을 받아 진행했다. PC에서는 정상적으로 보이지만 실제 모바일 환경에서 텍스트 위치가 깨지고, 메뉴/CTA 구조가 비효율적으로 노출되는 문제가 있어 기존 디자인은 최대한 유지하면서 모바일 가독성과 UX 흐름을 개선했다.

• 플랫폼: 아임웹
• 프로젝트 유형: 기존 사이트 개선(리뉴얼/유지보수)
• 목표: 디자인 유지 + 모바일 안정화 + 전환(문의) UX 개선
• 주요 작업: 상단(히어로) 텍스트 깨짐, WE/NOW 텍스트 깨짐, 모바일 메뉴 UX 정리, 장점 섹션 가독성 개선, CTA/푸터 구조 개선

문제 상황

1) 상단(히어로) 영역 텍스트 위치 깨짐

• 아임웹 편집 화면/PC에서는 정상 노출

• 실제 모바일 화면에서는 텍스트가 겹치거나 밀리며 가독성이 저하됨

  → 편집 화면과 실제 모바일 렌더링 간 차이 + 반응형 계산 문제로 판단

2) WE / NOW 섹션 텍스트 깨짐(PC 정상 / 모바일 붕괴)

• PC에서는 WE/NOW 2단 레이아웃이 정상

• 모바일에서는 줄바꿈·여백·높이 변화로 텍스트 정렬이 흐트러지고 위치가 깨짐

  → 동일 섹션을 PC/모바일 공용으로 유지한 채 미세 조정하면 재발 가능성이 높음

3) 모바일 상단 메뉴 UX 문제(중복 네비게이션)

• 모바일에서도 PC용 상단 메뉴바가 노출되어 가로로 길게 늘어짐

• 일부 메뉴만 보이고, 별도의 햄버거 메뉴가 이미 있어 이중 네비게이션 발생

  → 모바일 UX 혼란 및 화면 공간 낭비

4) 장점 섹션 텍스트 과밀(‘벽 텍스트’)