본문으로 건너뛰기

(주)패러다임

파는 곳과 보는 곳을 나눈다

시리얼 코드 하나로 수강 권한이 열리는 구조로, 로그인·코드 등록·시청까지 화면 하나가 한 가지 일만 하도록 만든 강의 사이트입니다.

업종
온라인 교육
사이트 유형
회원제 강의 사이트
메인 컬러
#3452FF
paradime-nirvana.store
(주)패러다임 프로젝트 화면
(주)패러다임 프로젝트 화면
(주)패러다임 프로젝트 모바일 화면
(주)패러다임 프로젝트 모바일 화면

프로젝트 개요

어떤 회사가 누구를 위해 무엇이 필요했고, 웹피터가 무엇을 만들었는지.

고객사

온라인 강의를 운영하는 회사로, 수강권을 사이트 밖에서 판매하고 보증서에 적힌 시리얼 코드로 전달합니다.

주요 방문자

수강권 구매 후 보증서의 시리얼 코드를 등록하고 강의를 시청하려는 이용자입니다.

필요했던 것

  • 코드를 넣으면 바로 권한이 열릴 것
  • 권한 없는 사람은 강의 페이지에 닿지 않을 것
  • 계정 공유를 막을 것
  • 로그인에서 막히지 않을 것

웹피터가 한 일

  • 권한 구조 설계
  • 시리얼 코드 등록
  • 구글 로그인
  • 회원 전용 게이트

디자인 컨셉

화면의 방향과 색, 글꼴을 이렇게 정한 이유.

화면 하나가 한 가지 일만 한다

수강권 구매자의 이용 순서에 맞춰 로그인, 코드 등록, 강의 목록, 시청 화면을 구성했습니다. 각 화면에서 다음 단계로 이동하는 방법을 명확히 안내했습니다.

컬러 시스템

  • 배경#000000
  • 메인 컬러#3452FF
  • 본문 · 헤드라인#2E2E2E

검정 바탕에 흰 타이포, 파랑은 누르는 자리에만. 영상을 보러 오는 사이트라 화면이 밝으면 강의로 넘어가는 순간 눈이 한 번 적응해야 합니다. 처음부터 어둡게 두면 그 단절이 없고, 어두운 면 위에서는 버튼 하나만 색을 가져도 충분히 눈에 띕니다.

타이포그래피

헤드라인
Open Sans

제작 방식과 구성

무엇으로 만들었고, 사이트를 어떻게 나눴는지.

적용한 구현 요소

  • 회원·권한
  • 시리얼 코드 인증
  • 구글 로그인
  • 콘텐츠 접근 제어

구현 포인트

로그인 환경과 이용 방법 안내

로그인에 제약이 있는 인앱 브라우저 사용자를 위해 크롬에서 여는 방법을 첫 화면에 안내했습니다. 별도 이용 안내에서도 로그인과 수강 절차를 확인할 수 있도록 했습니다.

설계 노하우

풀어야 했던 문제와 웹피터의 결정, 그리고 이 프로젝트에서 얻은 것.

풀어야 했던 문제

회원별 수강 권한 관리

수강권을 등록한 회원만 강의를 이용할 수 있도록 접근 권한을 관리해야 했습니다. 비로그인 접근과 계정 공유에 대한 안내도 필요했습니다.

  • 코드가 권한의 근거가 되어야 함
  • 회원 전용 페이지에 직접 접근하는 경로를 막아야 함
  • 계정 공유를 전제로 설계해야 함

웹피터의 결정

로그인과 코드 등록을 통한 권한 부여

구글 계정으로 로그인해 신원을 하나로 묶고, 시리얼 코드 등록을 권한이 생기는 유일한 지점으로 삼았습니다. 강의 페이지는 URL을 알아도 회원 전용 안내로 막히고, 계정 공유 방지가 상시 동작한다는 사실을 화면 하단에 계속 띄워 심리적 억제까지 함께 겁니다.

  • 구글 로그인으로 계정 생성 단계 자체를 없앰
  • 코드 등록을 권한 부여의 단일 지점으로 고정
  • 회원 전용 페이지는 비로그인 접근 시 안내로 대체
웹피터 인사이트
회원제 서비스는 한 화면이 한 가지 일만 할 때 막히지 않습니다. 권한이 열리는 지점을 코드 등록 하나로 고정하면 안내도 단순해집니다.

회원제 강의 사이트

이 사례 같은 사이트,
우리 회사에도 필요하다면

업종과 목적에 맞는 구조부터 함께 정합니다. 지금 사이트 상황을 남겨 주시면 영업일 1일 이내에 회신합니다.

  • 영업일 1일 이내 회신
  • 표준 제작 기간 5~8주
  • 소스코드·디자인 원본 인계
전체 포트폴리오