쇼피파이 테마 설정으로 되는 것, 안 되는 것
테마는 출발점입니다. 브랜드다움은 그 밖에 있습니다.
Category:
Shopify
Author:
ARKK
Date:
쇼피파이 테마를 구매하면 이런 생각이 듭니다.
"이 정도면 설정만 만져서 원하는 대로 만들 수 있지 않을까?"
절반은 맞습니다. 쇼피파이 테마 편집기에서는 생각보다 많은 것을 할 수 있습니다.
그런데 어느 지점부터는 아무리 설정을 뒤져도 원하는 화면이 나오지 않습니다.
테마 설정으로 해결되는 영역과 커스텀 코딩이 필요한 영역을 대략적으로 정리해 보았습니다.
쇼피파이 테마를 구매하면 이런 생각이 듭니다.
"이 정도면 설정만 만져서 원하는 대로 만들 수 있지 않을까?"
절반은 맞습니다. 쇼피파이 테마 편집기에서는 생각보다 많은 것을 할 수 있습니다.
그런데 어느 지점부터는 아무리 설정을 뒤져도 원하는 화면이 나오지 않습니다.
테마 설정으로 해결되는 영역과 커스텀 코딩이 필요한 영역을 대략적으로 정리해 보았습니다.
먼저, 설정으로 되는 것들
의외로 범위가 넓습니다. 아래 항목들은 코드를 건드리지 않고도 대부분의 유료 테마에서 가능합니다.
브랜드 색상 시스템과 폰트 전체 설정 (쇼피파이 기본 제공 폰트 사용 시)
섹션 추가, 삭제, 순서 변경
메인 배너와 슬라이드 이미지 교체
상품 그리드 배열 조정
헤더 레이아웃 선택 (테마가 제공하는 옵션 범위 안에서)
프리셋 전환
여기서 ARKK가 지키는 원칙이 하나 있습니다. 테마에서 제공하는 설정으로 가능한 것은 설정으로 처리합니다.
코드로 해결하면 당장은 빠릅니다.
다만 나중에 테마가 업데이트되거나 브랜드가 직접 수정하려 할 때 손댈 수 없는 영역이 되어버립니다.
그래서 작업 전에 항상 테마 구조부터 자세히 살펴봅니다.
의외로 범위가 넓습니다. 아래 항목들은 코드를 건드리지 않고도 대부분의 유료 테마에서 가능합니다.
브랜드 색상 시스템과 폰트 전체 설정 (쇼피파이 기본 제공 폰트 사용 시)
섹션 추가, 삭제, 순서 변경
메인 배너와 슬라이드 이미지 교체
상품 그리드 배열 조정
헤더 레이아웃 선택 (테마가 제공하는 옵션 범위 안에서)
프리셋 전환
여기서 ARKK가 지키는 원칙이 하나 있습니다. 테마에서 제공하는 설정으로 가능한 것은 설정으로 처리합니다.
코드로 해결하면 당장은 빠릅니다.
다만 나중에 테마가 업데이트되거나 브랜드가 직접 수정하려 할 때 손댈 수 없는 영역이 되어버립니다.
그래서 작업 전에 항상 테마 구조부터 자세히 살펴봅니다.
그런데 여기서부터는 안 됩니다
문제는 브랜드가 원하는 디자인과 레이아웃, 기능이 대부분 이 설정 범위 바깥에 있다는 점입니다.
1. 테마에 없는 섹션이나 블록을 새로 만드는 경우
룩북 그리드, 컬렉션 스토리 레이아웃, 특정 비율의 브랜드 인트로 화면처럼 테마가 애초에 제공하지 않는 구성입니다. 설정을 아무리 만져도 원하는 형태가 나오지 않아, 대부분 페이지 전체를 새로 설계하고 만들어야 합니다.
2. 인터랙션의 세부 동작
테마가 제공하지 않는 움직임입니다. 마우스 호버 시 전환, 스크롤에 따른 헤더 변화, 클릭 시 반응 같은 요소들입니다. 쇼피파이 고유 언어인 Liquid와 JavaScript, CSS를 조합해 개별적으로 구현해야 합니다.
3. 모바일에서만 다르게 보여야 하는 경우
데스크톱 3열, 모바일 1열처럼 단순한 구성은 설정으로 됩니다. 하지만 모바일에서만 특정 요소를 숨기거나 순서를 바꾸는 것은 대부분 불가능합니다. PC의 클릭 동작과 모바일의 터치 동작을 각각 최적화하는 작업도 분리해서 처리해야 합니다.
4. 여백과 타이포그래피의 미세 조정
브랜드 감성이 갈리는 지점이 사실 여기입니다. 제목과 본문 사이 간격, 이미지와 텍스트의 정렬, 자간처럼 페이지별로 다듬어야 하는 디테일입니다. 테마 설정은 보통 "크게, 보통, 작게" 수준의 선택지만 제공합니다.
1px 단위로 조정이 필요한 브랜드라면 개별 CSS로 다듬는 과정이 반드시 따라옵니다.
5. 헤더 투명 처리와 스크롤 반응
첫 화면에서는 헤더가 투명하게 이미지 위에 얹히고, 스크롤하면 배경색이 생기는 구성입니다. 그런데 상품 페이지에서는 어떻게 보일지, 컬렉션 페이지에서는 어떨지, 배경에 묻혀 메뉴가 보이지 않는 경우는 어떻게 처리할지 각각 대응이 필요합니다. 브랜드 사이트에서 자주 쓰이지만 지원하지 않는 테마가 많습니다.
6. 한글 최적화 적용
쇼피파이 한국 스토어 제작 시에는 한글 폰트를 업로드하고 영문과 한글 폰트를 따로 설정하는 과정이 필요합니다. 주요 메뉴 번역을 위해 언어 파일도 수정해야 합니다.
문제는 브랜드가 원하는 디자인과 레이아웃, 기능이 대부분 이 설정 범위 바깥에 있다는 점입니다.
1. 테마에 없는 섹션이나 블록을 새로 만드는 경우
룩북 그리드, 컬렉션 스토리 레이아웃, 특정 비율의 브랜드 인트로 화면처럼 테마가 애초에 제공하지 않는 구성입니다. 설정을 아무리 만져도 원하는 형태가 나오지 않아, 대부분 페이지 전체를 새로 설계하고 만들어야 합니다.
2. 인터랙션의 세부 동작
테마가 제공하지 않는 움직임입니다. 마우스 호버 시 전환, 스크롤에 따른 헤더 변화, 클릭 시 반응 같은 요소들입니다. 쇼피파이 고유 언어인 Liquid와 JavaScript, CSS를 조합해 개별적으로 구현해야 합니다.
3. 모바일에서만 다르게 보여야 하는 경우
데스크톱 3열, 모바일 1열처럼 단순한 구성은 설정으로 됩니다. 하지만 모바일에서만 특정 요소를 숨기거나 순서를 바꾸는 것은 대부분 불가능합니다. PC의 클릭 동작과 모바일의 터치 동작을 각각 최적화하는 작업도 분리해서 처리해야 합니다.
4. 여백과 타이포그래피의 미세 조정
브랜드 감성이 갈리는 지점이 사실 여기입니다. 제목과 본문 사이 간격, 이미지와 텍스트의 정렬, 자간처럼 페이지별로 다듬어야 하는 디테일입니다. 테마 설정은 보통 "크게, 보통, 작게" 수준의 선택지만 제공합니다.
1px 단위로 조정이 필요한 브랜드라면 개별 CSS로 다듬는 과정이 반드시 따라옵니다.
5. 헤더 투명 처리와 스크롤 반응
첫 화면에서는 헤더가 투명하게 이미지 위에 얹히고, 스크롤하면 배경색이 생기는 구성입니다. 그런데 상품 페이지에서는 어떻게 보일지, 컬렉션 페이지에서는 어떨지, 배경에 묻혀 메뉴가 보이지 않는 경우는 어떻게 처리할지 각각 대응이 필요합니다. 브랜드 사이트에서 자주 쓰이지만 지원하지 않는 테마가 많습니다.
6. 한글 최적화 적용
쇼피파이 한국 스토어 제작 시에는 한글 폰트를 업로드하고 영문과 한글 폰트를 따로 설정하는 과정이 필요합니다. 주요 메뉴 번역을 위해 언어 파일도 수정해야 합니다.
그래서 어떻게 판단하면 될까요
기준은 단순합니다.
"테마에서 이미 지원하는 것"의 범위 안이면 설정으로 됩니다.
물론 테마마다 다르며, 고가 테마일수록 지원 범위가 넓습니다. 색을 바꾸고, 순서를 옮기고, 이미지를 교체하는 것은 보통의 테마에 포함된 사용법입니다.
"테마가 지원하지 않는 것"을 원하면 코딩이 필요합니다.
없던 구조를 만들거나, 동작 방식을 바꾸거나, 정해진 옵션 밖의 기능과 디자인이 필요한 경우입니다.
브랜드가 명확한 아이덴티티를 가지고 있을수록 후자에 해당하는 요구가 많아집니다.
브랜드다움은 결국 디테일에서 갈리고, 남들과 다른 지점에서 나오기 때문입니다.
기준은 단순합니다.
"테마에서 이미 지원하는 것"의 범위 안이면 설정으로 됩니다.
물론 테마마다 다르며, 고가 테마일수록 지원 범위가 넓습니다. 색을 바꾸고, 순서를 옮기고, 이미지를 교체하는 것은 보통의 테마에 포함된 사용법입니다.
"테마가 지원하지 않는 것"을 원하면 코딩이 필요합니다.
없던 구조를 만들거나, 동작 방식을 바꾸거나, 정해진 옵션 밖의 기능과 디자인이 필요한 경우입니다.
브랜드가 명확한 아이덴티티를 가지고 있을수록 후자에 해당하는 요구가 많아집니다.
브랜드다움은 결국 디테일에서 갈리고, 남들과 다른 지점에서 나오기 때문입니다.
정리하면
쇼피파이 테마는 훌륭한 출발점입니다. 다만 출발점일 뿐입니다.
테마를 구매하면 사이트가 완성된다고 생각하고 시작했다가, 브랜드의 색을 입히려는 순간 막히는 경우가 많습니다.
오랜 기간 붙잡고 만들다가 포기한 스토어를 완성시켜 줄 수 있냐는 문의도 종종 받습니다. 이런 경우 기존 스토어를 일일이 수정하는 것보다 새로 구축하는 편이 결과적으로 낫다고 말씀드리는 편입니다.
중요한 것은 어느 수준의 스토어를 만들고 싶은지에 대한 답입니다. 그 기준이 정해지면 설정으로 갈지, 코드로 갈지는 자연스럽게 결정됩니다.
Build Brands, Not Stores. ARKK.
쇼피파이 테마는 훌륭한 출발점입니다. 다만 출발점일 뿐입니다.
테마를 구매하면 사이트가 완성된다고 생각하고 시작했다가, 브랜드의 색을 입히려는 순간 막히는 경우가 많습니다.
오랜 기간 붙잡고 만들다가 포기한 스토어를 완성시켜 줄 수 있냐는 문의도 종종 받습니다. 이런 경우 기존 스토어를 일일이 수정하는 것보다 새로 구축하는 편이 결과적으로 낫다고 말씀드리는 편입니다.
중요한 것은 어느 수준의 스토어를 만들고 싶은지에 대한 답입니다. 그 기준이 정해지면 설정으로 갈지, 코드로 갈지는 자연스럽게 결정됩니다.
Build Brands, Not Stores. ARKK.
자주 묻는 질문 (FAQ)
자주 묻는 질문 (FAQ)
Q1. 유료 테마를 사면 커스터마이징이 더 자유로운가요?
설정 옵션이 더 많은 것은 맞습니다. 다만 테마가 제공하지 않는 구조를 새로 만드는 작업은 유료 테마에서도 동일하게 코딩과 커스터마이징이 필요합니다.
Q2. 테마 설정만으로 스토어를 오픈해도 괜찮을까요?
가능합니다. 빠르게 판매를 시작하는 것이 목적이라면 합리적인 선택입니다.
Q3. 나중에 커스터마이징을 추가할 수도 있나요?
가능합니다. 다만 테마를 교체해야 하는 경우라면 초기에 방향을 정하는 편이 시간과 비용 면에서 유리합니다.
Q4. 코드 작업을 하면 테마 업데이트를 못 받나요?
받을 수 있습니다. 다만 수정한 부분은 업데이트 후 다시 적용해야 하는 경우가 있습니다. 또한 커스텀한 영역마다 업데이트 반영 여부가 다릅니다.
Q5. 한국 스토어를 만들 때 추가로 필요한 작업이 있나요?
한글 폰트 업로드와 영문, 한글 폰트 개별 설정이 필요합니다. 메뉴와 시스템 문구 번역을 위한 언어 파일 수정도 함께 진행됩니다.
Q1. 유료 테마를 사면 커스터마이징이 더 자유로운가요?
설정 옵션이 더 많은 것은 맞습니다. 다만 테마가 제공하지 않는 구조를 새로 만드는 작업은 유료 테마에서도 동일하게 코딩과 커스터마이징이 필요합니다.
Q2. 테마 설정만으로 스토어를 오픈해도 괜찮을까요?
가능합니다. 빠르게 판매를 시작하는 것이 목적이라면 합리적인 선택입니다.
Q3. 나중에 커스터마이징을 추가할 수도 있나요?
가능합니다. 다만 테마를 교체해야 하는 경우라면 초기에 방향을 정하는 편이 시간과 비용 면에서 유리합니다.
Q4. 코드 작업을 하면 테마 업데이트를 못 받나요?
받을 수 있습니다. 다만 수정한 부분은 업데이트 후 다시 적용해야 하는 경우가 있습니다. 또한 커스텀한 영역마다 업데이트 반영 여부가 다릅니다.
Q5. 한국 스토어를 만들 때 추가로 필요한 작업이 있나요?
한글 폰트 업로드와 영문, 한글 폰트 개별 설정이 필요합니다. 메뉴와 시스템 문구 번역을 위한 언어 파일 수정도 함께 진행됩니다.
프로젝트를 시작하고 싶으신가요?
프로젝트를 시작하고 싶으신가요?