Proposal · 1차 랜딩 페이지
JLCA KOREA
ON AIR 웹사이트 제안
JAPAN 라이브커머스 협회 한국지부 랜딩 페이지 리디자인 계획과 시안입니다. 6개 언어를 네이티브로 지원합니다.
01 · AUDIT현 일본 사이트 진단
콘텐츠(대표·고문·혜택·이벤트·회비)는 충실합니다. 정보 구조는 유지하고, 보여주는 방식을 전면 교체합니다.
모든 섹션이 같은 리듬
영문 라벨 + 제목 + 리스트가 12번 반복돼 스크롤 내내 강약이 없습니다.
섹션마다 다른 레이아웃
라이브 스테이지, 스크롤 문장, 가로 핀, 벤토, 확장 패널 등 8가지 이상 패턴으로 리듬을 만듭니다.
좋은 사진을 작게 소비
세로 라이브 촬영 사진이 장점인데 썸네일 크기로 잘려 들어가 있습니다.
세로 사진 = 라이브 화면
9:16 사진을 실제 라이브 방송 UI(시청자 수, 채팅, 하트, 상품 태그)로 연출해 히어로 오브제로 씁니다.
"라이브"다운 현장감 부재
일반 협회 사이트와 구분되지 않습니다. 실시간성·열기를 느낄 장치가 없습니다.
ON AIR 방송 스튜디오 톤
다크 스튜디오 + 온에어 레드 하나. 조명·그레인·움직이는 채팅으로 생방송 감각을 줍니다.
일본어 단일 · LINE 고정
해외 회원 유입 경로가 없고, 문의 채널이 일본 메신저에만 묶여 있습니다.
6개 언어 + 언어별 메신저
언어를 바꾸면 문의 버튼도 카카오톡·LINE·Zalo·Messenger 등 현지 채널로 바뀝니다.
02 · CONCEPT디자인 컨셉
사이트 전체를 하나의 생방송 스튜디오로 만듭니다. 방문자는 첫 화면에서 지금 이 순간 팔리고 있는 라이브를 보고, 스크롤하며 그 뒤의 사람과 구조를 만납니다.
03 · SYSTEM디자인 시스템
페이지 전체가 하나의 다크 테마, 액센트 컬러는 하나만 씁니다. 버튼은 pill, 카드·이미지는 20px 라운드로 통일합니다.
Unbounded
영문 디스플레이·숫자. 라틴·키릴(몽골어)·베트남어 모두 지원.
Pretendard
한국어·영어 본문/헤드라인. 가변 폰트, 다이내믹 서브셋.
Noto Sans JP · Thai · Sans
일본어·태국어·몽골어·베트남어는 언어별 폰트로 자동 전환.
04 · STRUCTURE1차 랜딩 구성
원본의 정보 순서는 그대로 두고, 섹션마다 성격에 맞는 레이아웃을 붙였습니다.
- 히어로카피 + 입회/강좌/메신저 CTA + 라이브 스테이지
- 선언문 · 3기둥기업이 팔린다 / 라이버가 번다 / 업계가 성장한다
- 대표이사사진 클립 리빌, 메시지, 실적 카운트업 3종
- 크리에이터발기인·톱 크리에이터 7명 마퀴
- 특별 고문대형 이름 리스트 + 호버 인물 카드
- 회원 혜택 8가로 핀 스크롤 (모바일은 스와이프)
- 연간 이벤트 12사진 2장 + 이벤트 12칸 벤토, 어워드 강조
- 추천 대상기업 / 라이버 확장 패널, 회원 유형별 신청
- 회비법인·라이버·LIVE MONSTER 강좌 (원화 확정 전 엔화 표기)
- 소식대표 기사 1 + 목록 2
- 파트너 모집대형 카피 + 패럴랙스 사진 기둥
- 푸터법인 개요, 본회·지부 주소, 언어 바로가기
05 · I18N다국어 전략
모든 문구는 키로 관리하고 언어별 JSON으로 분리합니다. 시안에도 같은 구조(mockup/i18n.js)로 6개 언어가 실제로 들어가 있습니다.
| 코드 | 언어 | 폰트 | 문의 채널 | 번역 상태 |
|---|---|---|---|---|
| ko | 한국어 (기본) | Pretendard | 카카오톡 채널 | 초안 완료 |
| en | English | Pretendard | 초안 완료 | |
| ja | 日本語 | Noto Sans JP | 公式LINE | 원문 기반 |
| mn | Монгол | Noto Sans (키릴) | Messenger | 네이티브 검수 필요 |
| vi | Tiếng Việt | Noto Sans | Zalo OA | 네이티브 검수 필요 |
| th | ไทย | Noto Sans Thai | LINE Official | 네이티브 검수 필요 |
URL · SEO
- 언어별 경로
/ko/en/ja/mn/vi/th - 첫 방문은 브라우저 언어로 안내, 선택은 쿠키로 기억
- hreflang, 언어별 메타·OG 이미지, 다국어 sitemap
언어별 타이포 규칙
- 한국어: 어절 단위 줄바꿈(keep-all)
- 일본어: 구절 단위 줄바꿈(auto-phrase)
- 태국어: 행간 확대, 긴 문장 언어는 헤드라인 자동 축소
- 통화·날짜·숫자는 Intl 포맷
한국어English日本語МонголTiếng Việtไทย
06 · STACK기술 스택 (본 개발)
시안은 정적 HTML입니다. 본 개발은 아래 구성으로 옮깁니다.
Next.js (App Router)
언어별 정적 생성으로 빠른 첫 로딩, 서버 컴포넌트 기본.
next-intl
locale 라우팅, 메시지 JSON, 날짜·통화 포맷.
Tailwind CSS v4
시안의 토큰(색·라운드·간격)을 테마 변수로 이전.
GSAP + Lenis
스크롤 핀·스크럽 연출. 모션 축소 설정 시 정적 화면.
소식 · 회비 CMS
소식과 회비는 관리자 화면에서 언어별 입력 (2차).
Vercel
이미지 AVIF/WebP 자동 변환, 목표 LCP 2.5초 이내.
07 · ROADMAP단계별 로드맵
랜딩 페이지
- 시안 확정 및 피드백 반영
- Next.js 이전, 6개 언어 라우팅
- 네이티브 번역 검수
- 입회·문의 버튼을 폼/메신저로 연결
회원 · 콘텐츠
- 브랜드 회원 / 라이버 회원 페이지
- 입회 신청 폼 + 관리자 알림
- 소식 CMS (언어별)
- 강좌 LIVE MONSTER 상세
플랫폼화
- 크리에이터 프로필 디렉터리
- 라이브 일정 캘린더
- 기업 × 라이버 매칭 신청
08 · DECISIONS결정 필요 사항
시안에는 아래 항목을 임시값으로 넣었습니다. 확정해 주시면 반영합니다.
- 동남아 2개 언어시안은 베트남어·태국어로 가정했습니다. 인도네시아어 등 다른 조합이면 교체합니다.
- 한국지부 정식 명칭 · 로고임시로 "JLCA KOREA / JAPAN 라이브커머스 협회 한국지부"를 썼습니다. 한국판 로고 필요 여부도 결정이 필요합니다.
- 원화 회비현재 일본 본회 엔화 금액을 "본회 기준"으로 표기했습니다.
- 한국 사무실 주소 · 도메인 · 카카오톡 채널푸터와 문의 버튼 연결에 필요합니다.
- 고해상도 원본 사진 · 초상 사용 동의인물 원형 사진(176px), 고문 사진(229px)은 해상도가 낮아 원본이 필요합니다. 인물 사진의 한국 사이트 사용 동의도 확인해 주세요.
- 몽골어 · 베트남어 · 태국어 검수자초안 번역은 제가 작성했으므로 공개 전 원어민 검수가 필요합니다.