SidequestLab
목록으로

1인 개발자의 모바일 UX 개선기 — Stitch 디자인 레퍼런스 활용법

디자이너 없이 혼자 개발하는 1인 개발자가 Stitch 디자인 레퍼런스와 OKLCH 디자인 토큰을 활용해 BookSalon의 UX를 Phase 8~9.5에 걸쳐 체계적으로 개선한 실전 과정을 공유합니다.

"기능은 다 됩니다. 그런데 왜 이쁘지가 않죠?"

북살롱(BookSalon) v1.0.0 출시를 앞두고 스스로 던진 질문입니다. 독서 기록, 리뷰, 토론방까지 핵심 기능은 모두 완성됐습니다. Supabase 마이그레이션도 끝났고, RLS 정책도 100% 통과했습니다. 그런데 막상 서비스를 열어보면 뭔가 어색하고 거칩니다.

문제는 디자인이었습니다. 그리고 저는 디자이너가 없는 1인 개발자입니다.

이 글은 그 상황에서 어떻게 체계적으로 UX를 개선했는지에 대한 실전 기록입니다. Phase 8부터 9.5까지, 총 7단계에 걸친 개선 과정을 솔직하게 공유합니다.

디자인 시스템은 있는데, 레이아웃은 즉흥이었다

Phase 7까지의 작업에서 OKLCH 색상 토큰 기반의 디자인 시스템을 완성했습니다. 21개 시맨틱 색상, Pretendard Variable 웹폰트, 세이지+앰버 브랜드 팔레트까지요. CSS 변수 하나만 바꾸면 전체 색상이 바뀌는 구조였습니다.

그런데 레이아웃과 UX 구조는 달랐습니다. 개발하면서 그때그때 즉흥으로 만든 구조였기 때문입니다.

  • 카드가 1컬럼으로만 나열돼 있어서 한 화면에 너무 적은 정보가 보였습니다
  • 필터가 접혀 있는 아코디언 방식이라 매번 클릭해야 했습니다
  • 히어로 섹션이 너무 크고 검색창과 분리돼 있어서 첫 진입 경험이 어색했습니다
  • 모바일에서 카드 이미지 비율이 제멋대로였습니다

디자인 시스템은 토대를 만들었지만, 레이아웃과 탐색 UX는 여전히 개선이 필요했습니다.

Stitch 디자인 레퍼런스 활용법

저는 이 문제를 해결하는 데 Stitch를 활용했습니다. Stitch는 Google의 디자인 레퍼런스 도구로, 실제 앱과 웹 서비스의 UI 패턴을 체계적으로 살펴볼 수 있습니다. 디자이너가 없는 개발자에게 "잘 만들어진 서비스는 이런 패턴을 쓴다"는 감을 빠르게 잡아주는 도구입니다.

"영감 → 적용" 프로세스

레퍼런스를 활용하는 핵심은 그대로 베끼지 않는 것입니다. 저는 이런 순서로 진행했습니다.

  1. 패턴 추출: 레퍼런스에서 "어떤 UX 문제를 이렇게 해결했구나"를 먼저 이해합니다
  2. 원칙 도출: "필터가 상시 노출되면 탐색 마찰이 줄어든다"처럼 원칙을 추상화합니다
  3. 맥락 적용: 북살롱의 브랜드(세이지+앰버), 타입(독서 커뮤니티), 사용자(한국 독자)에 맞게 변형합니다

예를 들어, 콘텐츠 플랫폼에서 자주 보이는 2컬럼 카드 그리드 패턴을 참고했을 때, 단순히 레이아웃을 복사한 것이 아니라 "왜 2컬럼인가 — 한 화면에 더 많은 책을 보여줘서 탐색 욕구를 자극하기 위해"라는 원칙을 먼저 이해했습니다. 그 다음 북살롱의 카드 정보 구조(책 표지, 제목, 저자, 리뷰 수)에 맞는 2컬럼 그리드를 직접 설계했습니다.

Phase 8: 첫 번째 큰 변화

Phase 8은 Stitch 레퍼런스를 기반으로 한 첫 번째 전면 개선입니다.

카드 2컬럼 그리드

Before: 모바일에서 카드가 1컬럼으로 나열. 스크롤을 많이 해야 책을 여러 권 볼 수 있었습니다.

After: 2컬럼 그리드 적용. 같은 스크롤 범위에서 두 배 많은 책을 볼 수 있게 됐습니다. 카드 내 정보 위계도 재정비했습니다 — 책 표지가 먼저, 제목과 저자가 다음, 리뷰 수와 별점이 보조 정보로.

// 2컬럼 그리드 적용 예시
<div className="grid grid-cols-2 gap-3 px-4">
  {forums.map((forum) => (
    <ForumCard key={forum.id} forum={forum} />
  ))}
</div>

필터 칩 상시 노출

Before: 필터가 아코디언으로 접혀 있었습니다. 탐색하려면 먼저 아코디언을 열어야 했습니다.

After: 카테고리 칩이 항상 화면에 보이는 수평 스크롤 형태로 변경. 클릭 한 번으로 바로 필터링됩니다.

히어로 그라데이션 강화

세이지 계열의 그라데이션을 히어로 영역에 강화 적용해 브랜드 첫인상을 개선했습니다. "다정한 도서관"이라는 브랜드 컨셉에 맞게 따뜻하지만 단정한 톤으로.

Phase 8.1: 3자 UX 분석 기반 모바일 최적화

Phase 8 배포 후, 외부 시각으로 UX를 분석하는 과정을 거쳤습니다. 이것이 생각보다 훨씬 효과적이었습니다.

혼자 개발하다 보면 "이 정도면 됐지"라는 익숙함이 생깁니다. 외부 시각이 필요한 이유입니다. 저는 상세한 UX 분석 체크리스트를 통해 직접 검수했고, 다음 문제들을 발견했습니다.

발견된 모바일 문제들:

  • 컨테이너 좌우 패딩이 너무 좁아 콘텐츠가 화면 끝에 붙어 보였습니다
  • 히어로 섹션이 지나치게 커서 첫 화면에서 카드가 거의 안 보였습니다
  • 검색창이 히어로 아래 별도 영역에 있어서 두 번 스크롤해야 검색할 수 있었습니다
  • 카드 이미지 높이가 콘텐츠에 따라 들쭉날쭉했습니다

적용한 수정:

/* 카드 이미지 aspect-ratio 고정 */
.book-cover {
  aspect-ratio: 3/4;
  object-fit: cover;
}
  • 컨테이너 패딩 16px 확보
  • 히어로 최소 높이 줄여서 카드가 첫 화면에 보이게 조정
  • 필터 칩 수평 스크롤로 화면 공간 효율화

시행착오 끝에 발견한 방법이에요: 외부 시각은 자신이 만든 것을 처음 보는 사람처럼 바라보게 해줍니다. "이게 당연히 이렇게 작동하는 거 아닌가?"라고 생각했던 것들이 실제로는 마찰이 있는 경우가 많습니다.

Phase 9.0: 작지만 중요한 Quick Wins

큰 구조 변경 없이 바로 적용 가능한 개선들입니다.

카피 개선

UX에서 텍스트는 생각보다 훨씬 중요합니다. "글을 남겨보세요"를 "떠오른 생각을 남겨보세요"로 바꾸는 것만으로도 서비스의 온도가 달라집니다.

| 이전 | 이후 | |------|------| | 글을 남겨보세요 | 떠오른 생각을 남겨보세요 | | 로그인이 필요합니다 | 반갑습니다, 먼저 로그인해주세요 | | 검색 결과 없음 | 아직 이 책의 이야기가 없네요. 첫 번째가 되어보세요! |

Safe Area Inset 적용

iOS에서 노치와 홈 인디케이터 영역이 콘텐츠를 가리는 문제입니다. 발견하지 못하면 특정 기기 사용자들이 계속 불편을 겪습니다.

.bottom-nav {
  padding-bottom: env(safe-area-inset-bottom);
}

한 줄 추가로 해결됩니다. 하지만 모바일을 직접 테스트하지 않으면 발견하기 어려운 문제입니다.

Phase 9.2: 탐색 헤더 에픽

Phase 9.2는 이번 개선 중 가장 큰 구조 변경입니다. "탐색 헤더 에픽"이라고 이름 붙인 이유가 있습니다.

히어로 + 검색바 통합

Before: 히어로 섹션(슬로건 + 브랜드 이미지)과 검색창이 별도 섹션이었습니다. 검색하려면 히어로를 지나쳐야 했습니다.

After: 검색창을 히어로 내부 pill 형태로 통합. 진입 즉시 검색이 가능해졌습니다.

이 결정이 쉽지 않았습니다. 브랜드 히어로 영역을 줄이는 것은 브랜드 노출 면에서 손해처럼 보였습니다. 하지만 "사용자가 BookSalon에 오는 이유는 책을 찾기 위해서"라는 원점에서 생각하면 검색이 최우선 액션이 맞습니다.

필터 아코디언 완전 제거

Phase 8에서 필터 칩 상시 노출로 전환했는데, Phase 9.2에서 필터 아코디언 코드 자체를 완전히 제거했습니다. 불필요한 코드를 남기지 않으면 유지보수가 쉬워지고, UI도 더 단순해집니다.

정렬 드롭다운 섹션 헤더 옆 배치

게시글 목록 위에 "최신순 / 인기순" 정렬 드롭다운을 배치했습니다. 스크롤 없이 목록 진입 즉시 정렬 방식을 바꿀 수 있습니다.

Phase 9.3~9.5: 마무리 폴리시

이미지/iOS 안정화 (Phase 9.3)

7개 컴포넌트의 이미지 최적화와 iOS Safari 호환성 수정입니다.

iOS Safari는 특히 이미지 처리 방식이 Chrome과 다릅니다. object-fit: cover가 의도한 대로 작동하지 않는 경우, position: absolute와 inset-0 조합으로 감싸는 방식이 더 안정적입니다.

// iOS Safari 안정화 패턴
<div className="relative aspect-[3/4] overflow-hidden rounded-lg">
  <img
    src={coverUrl}
    alt={title}
    className="absolute inset-0 h-full w-full object-cover"
  />
</div>

Retention 개선 (Phase 9.4)

사용자가 서비스에 머무르도록 유도하는 세부 요소들입니다.

  • 카드 hover 효과: 마우스를 올리면 카드가 살짝 올라오는 translateY(-2px) 효과. 클릭하고 싶은 느낌을 줍니다
  • 커뮤니티 활력 아이콘: 게시글 수, 최근 활동 표시로 "살아있는 커뮤니티"라는 느낌 강화

Brand Polish (Phase 9.5)

다크모드에서 OKLCH 색상의 채도(chroma)를 1.3~2.0배로 미세 조정했습니다. 다크모드는 라이트모드보다 채도를 약간 높여야 동등한 선명도로 느껴집니다. OKLCH 색상 공간은 이런 미세 조정이 직관적입니다 — 채도(C) 값만 올리면 되니까요.

OKLCH 디자인 토큰과의 시너지

Phase 8~9.5 개선이 가능했던 배경에는 Phase 1-7에서 완성한 디자인 토큰 시스템이 있습니다.

/* 시맨틱 토큰 사용 예시 */
.card {
  background-color: var(--color-bg-card);        /* 카드 배경 */
  border-color: var(--color-border-default);      /* 테두리 */
  color: var(--color-text-foreground);            /* 본문 텍스트 */
}

.card:hover {
  background-color: var(--color-bg-card-hover);  /* hover 상태 */
}

Phase 9.5에서 다크모드 채도를 조정할 때, CSS 변수 파일 하나만 수정했습니다. 38개 컴포넌트 파일을 하나씩 건드릴 필요가 없었습니다.

시맨틱 토큰의 실제 효과:

  • Phase 8에서 카드 hover 색상을 추가할 때, bg-gray-100 대신 bg-card-hover 토큰을 만들었습니다. 나중에 다크모드에서 자동으로 대응됐습니다
  • Phase 9.5 OKLCH 채도 조정 시, 변수 5개만 수정해 전체 다크모드 품질이 올라갔습니다

디자인 토큰에 투자한 시간이 이후 개선 속도를 높이는 복리 효과를 만들어냈습니다.

핵심 교훈 — 1인 개발자도 체계적 UX 개선이 가능하다

1. Phase 단위로 쪼개서 QA 통과 후 다음 단계

Phase 8에서 Phase 9.5까지 총 7단계, 각 단계마다 QA를 통과해야 다음으로 진행했습니다. 이 방식이 처음에는 느리게 느껴집니다. 하지만 실제로는 훨씬 빠릅니다.

한 번에 모든 것을 바꾸면 어떤 변경이 어떤 버그를 만들었는지 추적이 어렵습니다. Phase 단위로 쪼개면 문제가 생겼을 때 원인이 명확합니다.

2. 외부 시각으로 보면 보이는 것들

Phase 8.1의 3자 UX 분석이 효과적이었던 이유는 "처음 보는 사람"의 시각으로 서비스를 바라봤기 때문입니다. 개발자 본인은 서비스에 너무 익숙해서 불편함을 느끼지 못합니다.

방법은 간단합니다. 개발 중인 서비스를 처음 접하는 사람처럼 시나리오를 설정하고 따라가 보는 것입니다. "책 한 권을 검색해서 리뷰를 남기고 싶다"는 시나리오를 처음부터 끝까지 직접 해보면, 당연하다고 생각했던 흐름에서 마찰이 보입니다.

3. 모바일 최적화는 첫날부터

Phase 8.1에서 발견한 문제들 중 상당수가 "모바일에서만 보이는 문제"였습니다. 데스크탑 브라우저에서 반응형으로 확인할 때는 놓치기 쉽습니다.

실제 모바일 기기에서 테스트하거나, 개발자 도구의 모바일 에뮬레이터를 사용할 때는 반드시 실제 기기 해상도(iPhone 14: 390x844)로 확인하는 것이 좋습니다. 특히 iOS Safe Area, 노치, 홈 인디케이터 영역은 에뮬레이터에서도 체크가 가능합니다.

4. 레퍼런스는 원칙을 배우기 위해 본다

Stitch나 다른 디자인 레퍼런스 도구를 볼 때 가장 중요한 것은 "왜 이렇게 만들었을까"를 생각하는 것입니다. 레이아웃을 그대로 복사하면 맥락이 다른 서비스에 맞지 않습니다. 그 레이아웃이 해결하려는 UX 문제를 이해하고, 내 서비스의 맥락에 맞게 번역하는 것이 핵심입니다.

결과

Phase 8~9.5 개선 후 달라진 것들:

| 항목 | Before | After | |------|--------|-------| | 첫 화면 카드 노출 수 | 2-3개 (1컬럼) | 4-6개 (2컬럼) | | 검색까지 터치 수 | 3번 (히어로 → 스크롤 → 검색) | 1번 (진입 즉시) | | 필터 접근 | 아코디언 열기 필요 | 항상 노출 | | iOS Safe Area | 콘텐츠 가려짐 | 정상 적용 | | 다크모드 채도 | 라이트모드 대비 퍼짐 | OKLCH 미세 조정으로 균일 |

디자이너가 없어도 체계가 있으면 UX를 개선할 수 있습니다. Stitch로 레퍼런스의 원칙을 이해하고, 디자인 토큰으로 일관성을 유지하고, Phase 단위로 QA를 거치는 방식이 그 체계입니다.

1인 개발자의 UX 개선은 완벽한 디자인 감각이 아니라, 체계적인 프로세스에서 시작됩니다.

BookSalon은 현재 https://booksalon-nine.vercel.app 에서 사용할 수 있습니다. 이 글에서 설명한 개선 사항들이 실제 서비스에서 어떻게 보이는지 직접 확인해보세요.

여러분이 1인 개발자로 UX 개선을 진행하면서 발견한 팁이나 질문이 있다면 편하게 공유해주세요.