첫 화면부터 사용자 여정 만들기

2026-08-29Views 8약 7분생성형 AI 활용

Summary

첫 화면은 기능 소개가 아니라 방향 안내다

개발 환경을 만들었으면 이제 사용자가 처음 만나는 화면을 만든다. 여기서 흔히 하는 실수는 기능을 많이 보여주려는 것이다. "이런 기능도 있고, 저런 기능도 있고, 나중에는 이것도 됩니다"라고 한꺼번에 설명하고 싶어진다. 하지만 첫 화면의 역할은 기능 설명이 아니다. 사용자가 10초 안에 다음 세 가지를 이해하게 만드는 것이다.

이 서비스가 누구를 위한 것인지
사용자가 무엇을 얻는지
지금 무엇을 누르면 되는지

우리 서비스의 첫 약속은 분명하다. 동네 음식점·카페 사장님이 리뷰를 하나씩 읽지 않아도 반복 불만, 칭찬 포인트, 개선 액션, 답글 초안, 홍보 문구를 얻는 것이다. 따라서 첫 화면의 문장은 AI, 분석, SaaS 같은 공급자 언어보다 사장님의 결과에 맞춰야 한다.

예를 들어 첫 화면의 헤드라인은 이렇게 시작할 수 있다.

리뷰를 하나씩 읽지 않아도, 오늘 바꿀 개선 액션을 찾아드립니다.

그 아래에는 설명을 덧붙인다.

최근 리뷰를 업로드하면 반복 불만, 자주 언급된 장점, 답글 초안, 홍보 문구를 한 번에 정리한 리포트를 제공합니다.

이 정도면 사용자는 서비스의 방향을 이해한다. 이제 필요한 것은 화면 흐름이다.

첫 화면부터 사용자 여정 만들기 AI 생성 이미지

랜딩페이지를 실제 컴포넌트로 나누기

4장에서 만든 랜딩페이지 문구를 이제 Next.js 컴포넌트로 옮긴다. 이때 페이지 전체를 하나의 긴 파일로 만들지 말고 섹션별 컴포넌트로 나눈다. 나중에 문구 실험, 가격 변경, 샘플 리포트 교체가 쉬워진다.

CTA는 로그인 이후의 행동까지 생각해야 한다

CTA 버튼을 /login으로 보내는 것은 쉽다. 하지만 사용자 입장에서는 버튼을 누른 뒤에도 흐름이 끊기면 안 된다. 랜딩페이지에서 기대를 만들었는데 로그인 뒤에 빈 화면만 나오면 사용자는 곧바로 길을 잃는다.

좋은 흐름은 다음과 같다.

랜딩페이지
→ 회원가입 또는 로그인
→ 온보딩
→ 대시보드
→ 리뷰 업로드
→ AI 리포트 생성

아직 리뷰 업로드와 AI 분석은 다음 장 이후에 구현한다. 이번 장에서는 그 직전까지의 길을 만든다. 즉, 사용자가 가입한 뒤 빈 화면을 보는 것이 아니라 다음 행동을 알 수 있는 대시보드까지 도착해야 한다.

이 흐름을 만들 때는 인증을 직접 구현하지 않는다. 비밀번호 저장, 이메일 인증, 세션 관리, 로그아웃 처리는 보기보다 위험한 영역이다. 1인 창업가는 이런 기능을 직접 만드는 대신 Supabase Auth 같은 관리형 인증을 사용한다. Supabase는 Next.js 프로젝트에서 사용할 환경 변수와 쿠키 기반 인증 흐름을 공식 가이드로 제공한다.¹

Supabase Auth로 회원가입과 로그인을 맡기기

인증 화면은 처음부터 화려할 필요가 없다. 이메일, 비밀번호, 로그인 버튼, 회원가입 버튼이면 충분하다. 다만 구조는 처음부터 운영을 생각해 잡는다.

필요한 라우트는 다음과 같다.

/login        로그인 및 회원가입
/onboarding   첫 매장 정보 입력
/dashboard    로그인한 사용자의 첫 화면

로그인 성공 후에는 바로 /dashboard로 보내지 말고, 사용자의 온보딩 완료 여부를 확인한다. 매장 정보가 없으면 /onboarding으로 보내고, 이미 입력했다면 /dashboard로 보낸다.

판단 기준은 단순하다.

사용자 계정은 있음 + 매장 정보 없음 → onboarding
사용자 계정은 있음 + 매장 정보 있음 → dashboard
사용자 계정 없음 → login

Next.js App Router에서는 브라우저에서 쓰는 Supabase 클라이언트와 서버에서 쓰는 Supabase 클라이언트를 구분하는 편이 안전하다. 공식 튜토리얼도 @supabase/ssr을 사용해 서버 컴포넌트, 서버 액션, 세션 갱신 흐름을 나누는 방식을 안내한다.²

초기 구현에서 기억할 원칙은 세 가지다.

브라우저에서 필요한 공개 값에는 NEXT_PUBLIC_ 접두사를 붙인다. 예를 들어 Supabase 프로젝트 URL과 anon key처럼 클라이언트에서 써도 되는 값만 여기에 해당한다.
Supabase의 service_role 키처럼 모든 권한을 가진 비밀 키는 절대 클라이언트 코드에 넣지 않는다.
보호된 페이지인 /dashboard, /onboarding은 서버에서 사용자 세션을 확인한다.

NEXT_PUBLIC_은 "안전하게 숨겨준다"는 뜻이 아니다. 오히려 브라우저 코드에 포함되어 사용자에게 보일 수 있다는 뜻에 가깝다. 그래서 공개해도 되는 값과 서버에만 있어야 하는 값을 처음부터 구분해야 한다. 특히 service_role 키는 데이터베이스 정책을 우회할 수 있으므로 서버 내부 작업에만 제한적으로 사용해야 한다.

인증은 화면보다 보안 흐름이 중요하다. 로그인 버튼이 예쁘지 않아도 괜찮다. 사용자가 안전하게 가입하고, 다시 돌아왔을 때 자신의 데이터만 볼 수 있어야 한다.

온보딩에서는 분석에 필요한 최소 정보만 받는다

회원가입 직후 사용자는 아직 서비스를 신뢰하지 않는다. 이때 긴 설문을 보여주면 이탈한다. 온보딩 화면은 AI 분석에 꼭 필요한 정보만 수집해야 한다.

첫 버전에서 받을 정보는 네 가지면 충분하다.

항목	이유
매장명	리포트 제목과 대시보드 표시용
업종	음식점, 카페 등 분석 기준을 맞추기 위해 필요
리뷰 출처	네이버, 카카오, 구글, 배달앱 등 리뷰 맥락 파악
최근 고민	AI 리포트의 관점을 잡기 위한 선택 정보

최근 고민은 자유 입력보다 선택지로 시작하는 편이 좋다.

안 좋은 리뷰가 늘고 있어요
칭찬받는 메뉴를 홍보에 쓰고 싶어요
직원 응대 관련 리뷰를 정리하고 싶어요
리뷰 답글을 쓰는 시간이 부담돼요
아직 잘 모르겠어요

이 정보는 나중에 AI 프롬프트에 들어간다. 예를 들어 같은 리뷰라도 사장님이 직원 응대 문제를 걱정하고 있다면 리포트는 서비스 경험 관련 항목을 더 분명히 보여줘야 한다.

온보딩 저장 테이블은 다음 장에서 더 구체화하겠지만, 지금은 stores라는 테이블을 염두에 두고 화면을 만든다.

stores
- id
- user_id
- name
- business_type
- review_source
- main_concern
- created_at

여기서 user_id는 로그인한 사용자와 매장을 연결한다. 나중에 RLS를 적용하면 사용자는 자신의 매장 정보만 읽고 수정할 수 있게 된다.

온보딩을 너무 자세히 만들고 싶어질 때마다 이렇게 생각하면 된다.

첫 리포트를 만드는 데 지금 꼭 필요한가?

이 질문에 "아니요"라고 답하게 되는 항목은 뒤로 미룬다. 주소, 영업시간, 메뉴판, 직원 수, 월매출 같은 정보는 언젠가 도움이 될 수 있지만, 첫 사용자가 가입 직후 입력해야 할 정보는 아니다.

대시보드의 첫 화면은 빈 상태를 설계해야 한다

초기 SaaS에서 대시보드의 가장 중요한 화면은 화려한 차트가 아니다. 아직 데이터가 없을 때 보여주는 빈 상태다.

사용자가 온보딩을 마치고 /dashboard에 도착했는데 아무것도 없다면 이렇게 느낀다.

그래서 이제 뭘 하지?

이 질문에 답해야 한다. 첫 대시보드는 다음 세 영역으로 구성한다.

1. 빈 상태

아직 업로드한 리뷰가 없다면 빈 목록만 보여주지 말고 다음 행동을 안내한다.

아직 분석한 리뷰가 없습니다.
최근 리뷰를 복사해 붙여넣거나 CSV 파일로 업로드하면 첫 리포트를 만들 수 있습니다.

버튼은 리뷰 업로드하기 하나면 충분하다. 이 버튼은 다음 장에서 만들 업로드 화면으로 연결된다. 아직 업로드 기능이 완성되지 않았다면 버튼을 숨기기보다 "곧 리뷰 업로드 화면으로 연결됩니다"처럼 임시 안내를 두는 편이 낫다. 사용자는 지금 제품이 어디까지 와 있는지 알고 있어야 한다.

2. 샘플 리포트

데이터가 없는 상태에서도 사용자는 결과를 보고 싶어 한다. 그래서 샘플 리포트 카드를 배치한다.

샘플 카드에는 실제 리포트의 축약판을 보여준다.

반복 불만: 대기 시간이 길다는 언급이 12건
칭찬 포인트: 디저트 맛과 매장 분위기 언급이 많음
개선 액션: 피크 시간대 예상 대기 안내 문구 추가
답글 초안: 불편을 인정하고 재방문 유도
홍보 문구: 조용한 분위기와 수제 디저트를 강조

샘플은 과장하면 안 된다. 실제 제품이 만들 수 있는 수준으로 보여줘야 한다. 샘플이 너무 좋아 보이면 첫 실제 리포트가 실망을 만든다.

3. 다음 행동 카드

오른쪽 또는 하단에는 다음 행동을 작은 카드로 둔다.

다음에 할 일
1. 최근 리뷰 30개 준비하기
2. 리뷰 업로드하기
3. AI 리포트 확인하기
4. 개선 액션 1개 실행하기

이 카드는 체크리스트처럼 보이게 만든다. 사용자는 서비스 안에서 길을 잃지 않는다. 1인 창업가의 제품은 설명서가 부족한 경우가 많다. 그래서 화면 자체가 설명서 역할을 해야 한다.

이번 장에서 만들 화면의 완료 기준

이번 장의 목표는 완성된 SaaS가 아니다. 사용자가 랜딩페이지에서 시작해 로그인하고, 매장 정보를 입력한 뒤, 다음 행동이 보이는 대시보드까지 도착하는 것이다.

완료 기준은 다음과 같다.

랜딩페이지에 문제 제기, 결과 예시, 사용 방법, 가격, CTA가 있다.
CTA를 누르면 로그인 또는 회원가입 화면으로 이동한다.
Supabase Auth로 계정을 만들고 로그인할 수 있다.
로그인한 사용자는 온보딩 화면에서 매장명, 업종, 리뷰 출처, 최근 고민을 입력한다.
온보딩을 마치면 대시보드로 이동한다.
대시보드에는 빈 상태, 샘플 리포트, 리뷰 업로드 버튼, 다음 행동 카드가 있다.

여기까지 만들면 제품은 처음으로 하나의 흐름을 갖는다. 아직 AI 분석은 없지만 사용자는 서비스가 무엇을 하려는지 이해한다. 다음 장에서는 이 흐름에 실제 데이터를 연결한다. 매장 정보와 리뷰 데이터를 저장할 데이터 모델을 만들고, 사용자가 리뷰를 업로드하는 과정을 설계한다.

참고

¹Use Supabase Auth with Next.js

²Build a User Management App with Next.js

책 목록

혼자서 다 하는 창업: 1인 창업가용 AI 풀스택

전체 목차 보기