Shopify Login Flow 완벽 가이드: New Customer Accounts 로그인 후 고객 리디렉션 방법

Shopify의 New Customer Accounts를 도입하셨다면, 패스워드리스 로그인 방식으로 더 매끄러운 로그인 경험을 설계하셧을 것입니다. 그러나 한 가지 기본 설정 동작을 발견하셨을 것입니다. 바로 로그인 후 고객이 즉시 주문 상태(Order Status) 페이지로 이동한다는 점입니다. 기능적으로는 문제없으나, 항상 이상적인 여정은 아닙니다. 탐색하던 페이지를 이어서 보게 하거나, 홈 페이지로 랜딩하게 만들고 싶지 않으신가요?

다행히도 로그인 후 리디렉션 설정을 맞춤화하는 방법은 매우 간단합니다. 본 가이드는 Shopify New Customer Accounts를 사용할 때 로그인 후 어디로 고객을 보낼지 정확하게 제어하는 단계를 단계별로 설명합니다. 마지막 방문 페이지, 홈 페이지, 또는 특정 페이지 등 원하는 대로 설정해 고객 경험을 개선하고 스토어의 흐름에 맞추십시오.

로그인 후 리디렉션을 맞춤화해야 하는 이유

• 완성도 높은 사용자 경험 (UX): 마지막으로 방문한 페이지로 리디렉션하면 이탈을 줄이고 쇼핑을 중단했던 지점부터 바로 이어가게 할 수 있습니다.

• 일관된 브랜딩: 홈 페이지로 사용자를 보내 브랜드를 각인시키고 현재 진행 중인 프로모션이나 큐레이션된 컬렉션을 보여줄 수 있습니다.

• 타겟팅된 참여 유도: 특정 페이지("New Arrivals" 또는 "My Account" 대시보드 등)로 유도하여 고객의 다음 행동을 직접 정의할 수 있습니다.

• 혼란 감소: 단순히 쇼핑을 계속하려던 고객이 뜬금없이 주문 페이지로 유도되었을 때 느낄 수 있는 혼란을 방지합니다.

시작하기 전에: 테마 백업은 필수입니다!

보안이 최우선입니다! 코드를 수정하기 전, 라이브 테마를 반드시 백업해 두십시오. 문제가 발생할 경우 즉시 원복할 수 있는 안전장치입니다.

1. Shopify 어드민에서 Online Store > Themes로 이동합니다.

2. 현재 사용 중인 테마를 찾고 Actions 드롭다운(또는 ... 아이콘)을 클릭합니다.

3. Duplicate를 선택합니다.

4. 알아보기 쉽도록 복사된 테마의 이름을 변경합니다 (예: "Theme Backup - Pre Login Redirect Mod").

단계 1: 올바른 Shopify 테마 파일 찾기

로그인 링크 코드는 보통 헤더 관련 파일에 있습니다. 테마 구성에 따라 정확한 위치는 다릅니다:

• 대부분의 테마 (Dawn 등 Shopify 기본 제공 테마 포함):

  • 데스크톱 헤더: sections/header.liquid

  • 모바일 헤더/드로어: 마찬가지로 sections/header.liquid에 포함되어 있거나, 간혹 snippets/header-drawer.liquid 혹은 snippets/mobile-nav.liquid에 있습니다.

• 서드파티 테마: 유사한 파일을 탐색하십시오. 주로 쓰이는 파일명은 다음과 같습니다:

  • sections/header.liquid

  • snippets/navigation.liquid

  • snippets/account-links.liquid

팁: 테마 코드 에디터(Actions > Edit code)를 열고, 우측 상단 검색창에 routes.account_login_url을 입력하거나 어카운트 아이콘/링크 관련 코드를 검색해 정확한 위치를 식별하십시오. 데스크톱과 모바일 뷰 모두 확인해야 합니다.

단계 2: 로그인 리디렉션 URL 수정하기

로그인 링크가 포함된 파일을 찾았다면 다음 Liquid 코드 스니펫을 찾으십시오:

{{ routes.account_login_url }}

이제 원하는 리디렉션 방식에 맞게 아래 옵션 중 하나로 대체합니다:

옵션 A: 고객을 마지막으로 방문했던 페이지로 리디렉션

사용자 편의성이 가장 높은 방식입니다. 기존 코드를 다음과 같이 대체하십시오:

{{ routes.storefront_login_url }}

이 변수는 고객이 '로그인'을 클릭할 때 직전에 머물렀던 페이지를 자동으로 감지하여 저장합니다.

옵션 B: 스토어의 홈 페이지로 리디렉션

로그인한 사용자를 항상 홈 페이지로 랜딩시키고 싶다면 기존 코드를 다음과 같이 대체하십시오:

https://{{ shop.permanent_domain }}/customer_authentication/login?return_to=%2F

%2F 코드는 루트 URL(홈페이지)을 의미하는 / 코드의 URL 배리언트 방식 포맷입니다.

옵션 C: 특정 페이지로 리디렉션 (예: "New Arrivals")

임의의 신규 컬렉션이나 특정 커스텀 대시보드 페이지로 직접 유도하려면 기존 코드를 다음과 같이 대체하십시오:

https://{{ shop.permanent_domain }}/customer_authentication/login?return_to={{ "/collections/new-arrivals" | url_encode }}

주의: /collections/new-arrivals 부분을 사용자가 이동하길 원하는 랜딩 페이지 경로로 직접 변경해야 합니다 (예: /pages/welcome 또는 /collections/all). | url_encode 필터는 수정된 URL이 정상적으로 인코딩되도록 보장합니다.

단계 3: 저장, 테스트 및 배포

1. 테마 파일 에디터에서 변경 사항을 Save(저장)합니다.

2. 수정한 테마의 Preview(미리보기)를 실행합니다. 테스트를 위해 로그아웃되어 있는지 확인하고 로그인 프로세스를 진행하십시오. 다양한 페이지(홈, 제품 페이지, 컬렉션 페이지 등)에서 로그인을 시도하여 의도한 리디렉션 규칙이 올바르게 동작하는지 교차 검증해야 합니다. 데스크톱과 모바일 뷰 모두 확인하십시오.

3. 동작이 정상적인 것을 확인한 후, 다시 Online Store > Themes로 돌아가 작업한 테마 사본을 찾은 뒤 Publish를 클릭해 반영합니다.

   
   

한 걸음 더 나아가기: 구매 완료 후 여정 다듬기

로그인 리디렉션 설정을 변경하는 것은 구매 또는 주문 내역 확인 전의 사용자 여정을 최적화하는 훌륭한 방법입니다. 그렇다면 구매가 끝난 직후의 여정은 어떨까요?

원활한 경험 설계가 로그인 단계에서 멈춰서는 안 됩니다. 고객은 종종 주문 완료 이후에도 옵션 선택 실수, 배송지 오기재, 품목 추가 등 수정 작업을 필요로 합니다. 이때 Revize가 Shopify New Customer Accounts 시스템과 결합하여 탁월한 효과를 냅니다.

로그인 플로우를 최적화하는 과정에서, 고객에게 주문 셀프 제어 권한을 부여해 보십시오. Revize 앱을 적용하면 고객이 CS 문의를 넣지 않고도 주문 상태 페이지(New Customer Accounts 로그인 후 도달하게 되는 동일 영역)에서 즉시 직접 주문을 수정할 수 있어 지원 리소스를 절감하고 만족도를 제고합니다.

부드러운 커스텀 로그인 경로와 Revize를 통합한 유연한 구매 후 주문 수정 환경은, 충성도를 극대화하는 고객 중심의 UX를 구현하는 열쇠가 됩니다.

마치며

Shopify New Customer Accounts에서 로그인 후 리디렉션을 맞춤화하는 설계는 난이도 대비 효과가 뛰어난 커스터마이징 영역입니다. 로그인 후 최초 배치할 페이지를 정교하게 타겟팅하여 사용성 높은 쇼핑 경험을 만들어 가십시오. 직전 페이지, 메인 페이지 혹은 특정 전용 랜딩 페이지 무엇이든 디테일한 차이가 고객 만족과 참여도 상승에 큰 기여를 하게 됩니다.

성공적인 커스터마이징과 스킬 향상을 응원합니다!