[프론트엔드 고도화-1] 모바일 화면 최적화

#1 모바일 최적화

블로그의 핵심 기능 개발을 마친 후, 가장 먼저 손대기로 한 것은 '모바일 최적화'였다. 블로그의 핵심 기능은 읽기에 대한 UI/UX라고생각해서, 이번 고도화의 목표는 데스크탑에서는 잘 보이던 블로그를 모바일에서도 쾌적하게 사용할 수 있도록 만드는 것이었다.

1. 1차 개선: 답답했던 상세 페이지 확장

가장 시급한 문제는 게시글 상세 페이지였다. 데스크탑 기준으로 설계된 넓은 여백과 큰 폰트가 모바일의 좁은 화면에서는 오히려 독이 되었다. 콘텐츠 영역이 너무 좁아져 답답한 느낌을 주었고, 제목이 한눈에 들어오지 않았다.

(좌) : 모바일 최적화 전 　　 (우) : 1차 최적화 이후

이 문제를 해결하기 위해, Tailwind CSS의 '모바일 우선(Mobile First)' 접근 방식을 사용했다. 기본 스타일은 모바일에 맞추고, sm:, lg: 같은 반응형 접두사로 데스크탑 스타일을 추가하는 방식이다. 이렇게 하면 기존 데스크탑 UI를 해치지 않으면서 모바일 환경만 안전하게 개선할 수 있다.

1차 개선 작업:

1. 레이아웃 여백 조정: 페이지 전체와 콘텐츠 카드 내부의 좌우 여백(padding)을 모바일 기준으로 줄였다.
2. 폰트 크기 조정: 모바일에서는 제목(h1) 폰트 크기를 한 단계 줄여 가독성을 높였다. (text-3xl sm:text-4xl)
3. 컴포넌트 레이아웃 변경: 저자 프로필처럼 가로로 길었던 컴포넌트는 모바일에서 세로로 쌓이도록 변경했다. (flex-col sm:flex-row)

2. 2차 개선: 'Edge-to-Edge'로 완성하는 몰입감

1차 최적화로 어느 정도 숨통은 틔었지만, 여전히 아쉬움이 남았다. Velog와 같은 대형 기술 블로그 플랫폼들은 모바일 환경에서 좌우 여백을 완전히 없애, 콘텐츠가 화면을 꽉 채우는 'Edge-to-Edge' 디자인으로 최고의 몰입감을 제공한다. Deep Dive! 블로그도 그런 경험을 제공하고 싶었다.

"데스크탑에서는 현재의 카드 디자인을 유지하면서, 모바일에서만 카드 UI를 제거하여 화면을 넓게 쓸 수 있을까?"

이 질문에 대한 해답 역시 Tailwind CSS의 반응형 시스템에 있었다.

2차 개선 작업:

핵심 전략은 간단했다. 기존 카드 UI를 구성하던 스타일 클래스(bg-white, rounded-lg, shadow-md 등) 앞에 sm: 접두사를 붙여, 작은 화면(모바일) 이상에서만 카드 스타일이 적용되도록 변경했다.

// PostContent.tsx 예시
<article 
  className="
    prose max-w-none /* 기본 스타일 */
    
    px-4 /* 모바일용 좌우 여백 */
    sm:bg-white sm:rounded-lg sm:shadow-md /* sm 화면부터 적용될 카드 스타일 */
    sm:p-6 md:p-8 /* sm 화면부터 적용될 내부 여백 */
    
    /* ... 다크 모드 스타일 ... */
  "
>
  {/* ... */}
</article>

이렇게 PostContent, PostAuthorProfile 등 상세 페이지를 구성하는 모든 컴포넌트에 동일한 원칙을 적용했다. 페이지 최상위 컨테이너의 모바일 여백을 px-0으로 완전히 제거하고, 각 컴포넌트가 자체적으로 모바일용 내부 여백(px-4)을 갖도록 하여 정렬을 맞췄다.

(좌) : 1차 최적화 　　 (우) : 2차 최적화 이후

그 결과, 데스크탑에서는 기존의 세련된 카드 디자인을 그대로 유지하면서도, 모바일에서는 불필요한 경계가 모두 사라진, 화면을 꽉 채우는 몰입형 독서 환경을 마침내 완성할 수 있었다. 작은 디테일의 변화였지만, 사용자 경험의 질은 크게 달라졌다.

2. 헤더 UI 개선: 드롭다운 메뉴 적용

다음 문제는 헤더였다. 모든 메뉴가 항상 펼쳐져 있어 모바일 화면을 많이 차지했다. 로그인 이후 '새 글 작성'이나 '로그아웃' 같은 메뉴는 아바타 내부로 넣는 편이 낫다고 판단했다.

그래서 모바일에서는 프로필 아바타만 노출하고, 아바타를 터치하면 나머지 메뉴가 드롭다운으로 나타나도록 구현했다.

구현 과정:

• 상태 관리: useState 훅으로 드롭다운 메뉴의 열림/닫힘 상태를 관리했다.
• 반응형 UI: Tailwind CSS의 hidden, sm:flex 클래스를 사용해 모바일과 데스크탑에서 보일 요소를 명확히 구분했다.
• UX 개선: framer-motion으로 부드러운 애니메이션을 추가하고, 메뉴 바깥을 클릭하면 닫히도록 커스텀 훅(useOnClickOutside)을 만들어 사용성을 높였다.

3. 결론

모바일 최적화를 통해 게시글 및 헤더 부분에서 UI/UX를 개선을 진행했고, 블로그의 UI/UX 완성도를 크게 개선할 수 있었다. 비교적 간단한 CSS 수정과 약간의 상태 관리로 사용자 경험을 향상 시킨 것 같다. 이제 어떤 디바이스로 접속해도 편안한게 Deep Dive! 블로그를 사용할 수 있게 되었다.