Shopify 독립 출판 서점 테마 제작기: The Moved Mover

프로젝트 개요

"The Moved Mover"는 독립 출판물, 아티스트북, 그리고 창작자들의 목소리를 담은 책들을 판매하는 온라인 서점을 위한 Shopify 테마입니다.

"우리는 매 순간 흔들리고, 움직이며, 변합니다. 그리고 그 흔들림은 다시 누군가를 움직입니다. The Moved Mover는 그 파동을 기록으로 남깁니다."

프로젝트 저장소: learn-shopify-theme
작업 기간: 2025년 11월 ~ 12월
개발 환경: Shopify Liquid, HTML/CSS

---

프로젝트 동기

독립 출판의 가치를 전달하고, 창작자들의 목소리를 효과적으로 전달할 수 있는 온라인 플랫폼이 필요했습니다. 기존의 범용 커머스 테마들은 독립 출판의 철학과 브랜드 아이덴티티를 표현하기에 한계가 있었고, 이에 맞춤형 Shopify 테마를 직접 제작하게 되었습니다.

---

기술 스택

핵심 기술

• Shopify Liquid: Shopify의 템플릿 언어
• HTML5 / CSS3: 시맨틱 마크업 및 스타일링
• JavaScript: 인터랙션 및 동적 기능 구현
• Shopify CLI: 테마 개발 및 배포 도구

개발 도구

• VS Code: Shopify Liquid Extension 활용
• Git: 버전 관리
• Shopify Theme Dev: 로컬 개발 환경

---

프로젝트 구조

learn-shopify-theme/
├── assets/              # 정적 자산 (CSS, JS, 이미지, 비디오)
│   ├── critical.css     # 필수 CSS
│   └── video.mp4        # 히어로 배경 비디오
├── blocks/              # 재사용 가능한 UI 컴포넌트
├── config/              # 테마 전역 설정
├── layout/              # 페이지 최상위 래퍼
│   └── theme.liquid
├── locales/             # 다국어 번역 파일
├── sections/            # 페이지 섹션 컴포넌트
│   ├── home-hero.liquid
│   ├── featured-books.liquid
│   ├── books-catalog.liquid
│   ├── header.liquid
│   ├── about-hero.liquid
│   ├── submission-form.liquid
│   └── ...
├── snippets/            # 재사용 가능한 코드 조각
└── templates/           # 페이지 템플릿
    ├── index.json       # 홈페이지
    ├── collection.json  # 컬렉션 페이지
    └── ...

---

주요 기능 구현

1. 홈 히어로 섹션 (home-hero.liquid)

홈페이지의 첫인상을 결정하는 풀스크린 히어로 배너를 구현했습니다.

주요 특징

• 비디오 배경 지원: Shopify CDN에서 호스팅되는 배경 비디오
• 이미지 폴백: 비디오 미지원 시 이미지로 대체
• Overlay 투명도 조절: 30% 투명도로 비디오 가시성 향상
• 100vh 풀스크린: 모든 디바이스에서 전체 화면 표시
• 애니메이션: Fade-in 애니메이션으로 부드러운 등장 효과
• 스크롤 인디케이터: 바운스 애니메이션으로 사용자 유도

기술적 구현

{% if section.settings.hero_video_url != blank %}
  <video class="home-hero__video" autoplay muted loop playsinline>
    <source src="{{ section.settings.hero_video_url }}" type="video/mp4">
  </video>
{% elsif section.settings.hero_video_asset != blank %}
  <video class="home-hero__video" autoplay muted loop playsinline>
    <source src="{{ section.settings.hero_video_asset | asset_url }}" type="video/mp4">
  </video>
{% elsif section.settings.hero_image %}
  <img src="{{ section.settings.hero_image | image_url: width: 1920 }}" alt="Hero Banner">
{% endif %}

반응형 디자인

• 모바일에서 스크롤 인디케이터 숨김
• 버튼을 세로 방향으로 재배치
• Clamp()를 활용한 유연한 폰트 사이즈

font-size: clamp(1.75rem, 5vw, 2.8rem);

2. 도서 카탈로그 (books-catalog.liquid)

독립 출판물을 카테고리별로 탐색할 수 있는 카탈로그 섹션입니다.

주요 특징

• 카테고리 필터링: 에세이, 소설, 시, 예술, 철학 등
• 검색 기능: 실시간 도서 검색
• 그리드 레이아웃: 반응형 그리드 시스템
• 호버 효과: 책 카드에 Overlay 및 CTA 버튼 표시
• 별점 시스템: 사용자 리뷰 표시

CSS Grid 구현

.books-catalog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
}

인터랙티브 필터 버튼

.books-catalog__filter-btn--active {
  background-color: currentColor;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(196, 163, 106, 0.3);
  transform: translateY(-2px);
}

3. 헤더 네비게이션 (header.liquid)

모든 페이지에서 일관된 네비게이션을 제공하는 고정 헤더입니다.

주요 특징

• Sticky Header: 스크롤 시에도 상단 고정
• 드롭다운 메뉴: 도서 카테고리 하위 메뉴
• 장바구니 아이콘: 아이템 수 배지 표시
• 로고와 메뉴: 중앙 정렬 레이아웃
• 반응형: 모바일에서는 햄버거 메뉴로 전환 (향후 구현)

Sticky Header 구현

.header {
  position: sticky;
  top: 0;
  z-index: 100;
}

드롭다운 메뉴

.header__dropdown {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s;
}

.header__menu-item--has-dropdown:hover .header__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

4. About 페이지 히어로 (about-hero.liquid)

출판사의 철학과 스토리를 전달하는 About 페이지 히어로 섹션입니다.

주요 특징

• 조건부 배경 이미지: 이미지 설정 시에만 표시
• CSS 변수 활용: 색상 관리의 일관성
• Rich Text 지원: 부제목에 서식 있는 텍스트 적용
• 블랙/화이트 모드: 검은 배경에 흰색 텍스트 기본값

Rich Text 서브타이틀 처리

<div class="about-hero__subtitle" style="--subtitle-color: {{ section.settings.subtitle_color }};">
  {{ section.settings.subtitle }}
</div>

<style>
.about-hero__subtitle p {
  color: var(--subtitle-color);
  margin: 0;
}
</style>

---

기술적 도전과 해결

1. 비디오 배경 최적화

문제

• 로컬 assets 폴더의 비디오 파일이 제대로 로드되지 않음
• 3MB 비디오 파일의 로딩 속도 이슈

해결

• Shopify CDN에 비디오를 업로드하여 URL로 참조
• hero_video_url 설정을 통해 CDN URL 직접 사용
• autoplay muted loop playsinline 속성으로 자동 재생 최적화

<video class="home-hero__video" autoplay muted loop playsinline>
  <source src="https://cdn.shopify.com/videos/c/o/v/bb37e2c1a5c34d8ab30c3568194be6a1.mp4" type="video/mp4">
</video>

2. 색상 일관성 관리

문제

• 여러 섹션에서 일관된 색상 사용 필요
• Rich Text 내부의 중첩된 <p> 태그에서 색상 상속 이슈

해결

• CSS 변수를 활용한 색상 관리
• color: inherit로 중첩 요소에 색상 전달

.home-hero__subtitle {
  color: {{ section.settings.subtitle_color }};
}

.home-hero__subtitle p {
  margin: 0;
  color: inherit;
}

3. 반응형 레이아웃

문제

• 다양한 화면 크기에서 일관된 경험 제공
• 모바일에서 히어로 섹션의 가독성 저하

해결

• CSS clamp() 함수로 유연한 폰트 사이즈
• 미디어 쿼리로 모바일 전용 스타일 적용
• Flexbox와 Grid의 조합으로 반응형 레이아웃 구현

.home-hero__title {
  font-size: clamp(1.75rem, 5vw, 2.8rem);
}

@media (max-width: 768px) {
  .home-hero__buttons {
    flex-direction: column;
    width: 100%;
  }
}

4. Books Catalog 필터 UX

문제

• 초기에는 "All" 필터 버튼이 있었으나 UX 관점에서 불필요
• 필터링 상태를 명확히 표시할 필요

해결

• "All" 버튼 제거 (커밋: 821ffe2)
• --active 클래스로 활성 필터 시각화
• Hover 효과로 인터랙션 강화

.books-catalog__filter-btn--active {
  background-color: currentColor;
  color: #ffffff !important;
  transform: translateY(-2px);
}

---

페이지 구성

홈페이지 (index.json)

1. Hero: 풀스크린 비디오 배너
2. Featured Books: 추천 도서 섹션
3. Publishers Spotlight: 협력 출판사 소개
4. Latest News: 최신 뉴스 및 이벤트
5. Newsletter: 뉴스레터 구독
6. Footer: 푸터 정보

정적 페이지

• About (page.about.json): 소개, 가치, 팀
• Authors (page.authors.json): 소속 작가 소개
• Submission (page.submission.json): 원고 투고 안내
• Contact (page.contact.json): 문의 폼
• FAQ (page.faq.json): 자주 묻는 질문

컬렉션 페이지 (collection.json)

• Books Catalog 섹션 포함
• 카테고리별 필터링 기능

---

디자인 시스템

색상 팔레트

• Primary (Accent): #c4a36a - 골드 브라운
• Background: #ffffff / #f9fafb / #2d2d2d
• Text: #2d2d2d / #666666 / #999999
• Border: #e0e0e0

타이포그래피

• Heading: 700 weight, clamp로 반응형 사이즈
• Body: 400-500 weight, 1.6-1.7 line-height
• Letter Spacing: Heading에 -0.3px 적용

간격 시스템

• Section Padding: 100px - 180px (상하)
• Component Gap: 1rem - 2rem
• Grid Gap: 2rem

---

성능 최적화

1. 이미지 최적화

• Shopify의 image_url 필터로 크기 지정
• Lazy loading 기본 지원

<img src="{{ section.settings.hero_image | image_url: width: 1920 }}">

2. CSS 분리

• critical.css: 모든 페이지에 필요한 필수 CSS
• Section별 {% stylesheet %} 태그: 해당 섹션에만 필요한 CSS

3. 비디오 최적화

• Shopify CDN 활용
• autoplay muted loop playsinline 속성으로 자동 재생
• Overlay로 콘텐츠 가독성 확보

---

Git 커밋 히스토리 하이라이트

비디오 히어로 구현 (12월 4일)

560b716 - Use Shopify CDN URL for hero video
fe81ed8 - Fix video hero banner display issue
4200bb4 - Add full-screen video hero banner with video.mp4

Books Catalog 개선 (12월 4일)

821ffe2 - Remove active filter button from Books Catalog section
5ccb811 - Enhance Books Catalog section design

About 섹션 리팩토링 (12월 4일)

dae7003 - Refactor About Hero section subtitle handling
1e43286 - Refactor About Hero section for conditional background image

README 업데이트 (12월 4일)

d92ce88 - Update README.md to reflect new theme name and features

---

배운 점

1. Shopify Liquid 템플릿 시스템

• Liquid 문법과 Shopify 객체 구조 이해
• Section Schema를 통한 커스터마이징 옵션 제공
• {% stylesheet %}, {% javascript %} 태그의 중복 방지 기능

2. 컴포넌트 기반 설계

• Sections와 Blocks를 활용한 모듈화
• 재사용 가능한 Snippets 작성
• JSON 템플릿으로 페이지 구성 관리

3. CSS 설계 패턴

• BEM 명명 규칙 적용
• CSS 변수를 통한 일관된 디자인 시스템
• clamp(), min(), max() 함수로 반응형 구현

4. 성능 최적화

• Critical CSS 분리
• Shopify CDN 활용
• 이미지 크기 최적화

5. 사용자 경험 (UX)

• 불필요한 UI 요소 제거 ("All" 필터 버튼)
• 명확한 인터랙션 피드백 (Hover, Active 상태)
• 접근성을 고려한 시맨틱 마크업

---

개선 사항 및 향후 계획

단기 개선 사항

• 모바일 햄버거 메뉴 구현
• 실제 상품 데이터와 연동
• 검색 기능 JavaScript 구현
• 카테고리 필터링 JavaScript 구현
• 장바구니 기능 고도화

중기 개선 사항

• 다국어 지원 (영문, 한글)
• 블로그 섹션 스타일링
• 상품 상세 페이지 커스터마이징
• Wishlist 기능 추가
• 빠른 보기 (Quick View) 모달

장기 개선 사항

• 작가 인터뷰 시리즈 페이지
• 커뮤니티 기능 (독자 리뷰, Q&A)
• 추천 시스템 (개인화)
• 독립 출판 가이드 콘텐츠 허브
• 이벤트 및 북토크 일정 관리

---

프로젝트 회고

잘한 점

1. 브랜드 아이덴티티 구현: "The Moved Mover"의 철학을 디자인으로 효과적으로 전달
2. 모듈화된 구조: Sections과 Blocks로 재사용 가능하고 확장 가능한 구조 구축
3. 성능 최적화: CDN 활용 및 CSS 분리로 로딩 속도 개선
4. 상세한 문서화: README에 프로젝트 구조와 사용법을 명확히 기록

아쉬운 점

1. JavaScript 부재: 필터링과 검색 기능이 아직 정적 상태
2. 테스트 부족: 다양한 브라우저와 디바이스에서의 테스트 필요
3. 접근성: ARIA 라벨 및 키보드 네비게이션 개선 필요

다음 프로젝트에서 시도할 것

1. Alpine.js 또는 Vue.js: Liquid와 함께 사용할 경량 프레임워크
2. Storybook: 컴포넌트 문서화 및 테스트
3. E2E 테스트: Playwright 또는 Cypress로 테스트 자동화
4. 성능 모니터링: Lighthouse CI 통합

---

참고 자료

• Shopify Theme Architecture
• Liquid Template Language
• Shopify CLI Documentation
• Shopify Polaris Design System

---

마무리

"The Moved Mover" 테마 제작을 통해 Shopify의 강력한 커스터마이징 기능과 Liquid 템플릿 시스템을 깊이 있게 이해할 수 있었습니다. 독립 출판이라는 특수한 도메인에 맞춤화된 온라인 서점을 구축하면서, 단순히 기술적인 구현을 넘어 브랜드의 철학과 가치를 디지털 경험으로 전환하는 과정을 경험했습니다.

앞으로 이 테마를 기반으로 실제 독립 출판사들이 자신들의 이야기를 효과적으로 전달하고, 독자들과 의미 있는 연결을 만들어갈 수 있기를 기대합니다.

"우리는 움직일 때 아름답다" - The Moved Mover

---

프로젝트: The Moved Mover - Shopify Theme
작성일: 2025년 12월 5일
작성자: Eunjae Tony Lee