도시를 넘어 연결되는
웰니스 커뮤니티

한 줄로 정리하면

"런클럽 · 요가 · 하이킹 · 리커버리"를 포함한 웰니스 이벤트와 플레이스를 한 도시 안에서 발견·참여하고, 도시를 옮겨도 그 루틴이 이어지도록 만든 커뮤니티 플랫폼입니다. Next.js 기반의 PWA처럼 동작하며, 모바일에 우선 최적화된 단일 컬럼 UX가 데스크톱에서도 가운데에 그대로 정렬됩니다.

전체 화면 구조와 라우트

홈·맵·커뮤니티·로그인 4개의 메인 진입점 외에, 이벤트/플레이스/포스트/유저 각각의 상세·생성·수정 흐름과 메시지·알림·저장·설정 같은 보조 영역까지 이미 구축돼 있습니다. 클라이언트 측 카피로부터 추출한 라우트 트리입니다.

다크 모노 + 비비드 액센트의 이중 팔레트

기본 표면은 거의 순흑(#0A0A0A)에 흰 글자, 거기에 채도 높은 액센트 팔레트 11색이 따로 정의돼 있습니다. 카드·뱃지·마커처럼 강조가 필요한 곳에서만 이 액센트가 한 점씩 등장하는 구조입니다. 폰트는 Pretendard 단일.

3.1 코어 표면 / 텍스트 (Light · Dark 페어)

3.2 액센트 팔레트 — `--b48utg*`

Vanilla Extract로 보이는 컴파일러가 만든 토큰들. 마커·뱃지·하이라이트·카테고리 칩에서 이 색이 한 번씩 튀어나옵니다. 특히 노랑(#FED500)은 맵 마커, 라임/민트(#01FF84·#E2FF2F)는 선택 마커 콜아웃에 쓰는 것으로 추정.

3.3 타이포그래피 — Pretendard 단일

한국어: Pretendard · 일본어: pretendardJP · 폴백: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif

3.4 라운드 · 보더 · 스페이싱 토큰

지금 4개 메인 화면이 이렇게 생겼습니다

각 페이지의 데스크톱·모바일 캡처와 함께, 어떤 컴포넌트로 구성돼 있고 어떤 카피가 어디에 들어가 있는지를 정리했습니다. 캡처는 헤드리스 크롬으로 직접 받은 실제 화면입니다.

DESKTOP · 1440 × 3200

MOBILE · 390 × 3500

https://sqnc.global/

홈 / 피드

앱을 처음 켰을 때 가장 먼저 보이는 큐레이션·발견 허브

섹션 구성 (위 → 아래)

1. 상단 공지 배너 — "도시의 웰니스 이벤트, 한곳에서" + 소형 CTA
2. 추천 이벤트 — 큰 풀블리드 이미지 카드 (예: SUNSET RUN × recovery pilates)
3. 인기 포스트 — 가로 스크롤 카드, 작성자·이미지·좋아요·댓글·북마크
4. 다가오는 이벤트 — 날짜 그룹(오늘/내일/5월 13일/14일/16일) + 가로 카드 리스트
5. 카테고리에서 찾기 — 칩 그리드 (러닝·요가·필라테스·하이킹·리커버리·라이드 등)
6. 도시에서 찾기 — 도시 사진 칩 (서울·부산·도쿄·발리…)
7. 활동 중인 호스트 — 호스트 아바타 카드 (가로 스크롤)
8. 지금 주목받는 플레이스 — 플레이스 카드 (가로 스크롤)
9. "맵에서 플레이스 더 보기" / "커뮤니티에서 인기 포스트 더 보기" 인라인 CTA
10. 함께 만드는 웰니스 플레이스 — UGC 제안 유도 ("좋은 플레이스를 알고 있다면 여기에 추가해 주세요. 등록되면 기여자로 함께 기록됩니다.")
11. "이 맵, 기대되시나요? · 기대돼요" 투표 콜아웃

홈 페이지 핵심 카피 (원문 그대로)

도시의 웰니스 이벤트, 한곳에서 런클럽 · 요가 · 하이킹 · 리커버리 지금 열려 있는 이벤트를 발견하세요. 발견에서 연결까지, 이렇게 시작됩니다 당신의 다음 이벤트를 찾아보세요. 처음이어도 괜찮습니다.

SOURCE — Next.js streaming payload

레이아웃 특징

• 모바일 우선의 단일 컬럼이 데스크톱에서 그대로 가운데 정렬됨 (대형 모니터에서 좌우 빈 영역이 큼)
• 좌측에 아이콘 전용 사이드 레일 (홈·맵·포스트·저장·프로필)
• 모든 카드 코너 radius 14~16px, 풀블리드 이미지 위 오버레이 텍스트 패턴 자주 사용
• 섹션 헤더 옆 "더 보기 →" 인라인 화살표 일관 적용

DESKTOP · 1440 × 900

MOBILE · 390 × 844

https://sqnc.global/map?from=home

맵 / 이벤트플레이스

"내 주변 이벤트와 플레이스" — 위치 기반 발견 화면

화면 요소

• 풀스크린 다크 맵 — 구글 맵 다크 테마, 거리 라인이 미세하게 빛남
• 상단 중앙 세그먼트 토글 — "이벤트 / 플레이스" 핀 스타일 (선택 시 흰 배경 + 검정 글씨)
• 좌상단 ← 뒤로가기 / 우상단 검색·필터 아이콘
• 마커 스타일 — 노란 핀(#FED500) 다수, 선택된 마커는 라임/민트 콜아웃(#01FF84·#E2FF2F)에 검정 텍스트
• 마커 콜아웃 — 일정 + 호스트명 (예: "Friends On lol/")이 말풍선 스타일로 떠 있음
• 하단 시트(추정) — 마커 탭 시 카드/리스트 스와이프 노출

필터 · 정렬 옵션

• 이벤트 필터: 도시 / 활동 카테고리 / 기간 (이벤트 카테고리 선택, 기간 선택)
• 플레이스 필터: 도시 / 장소 카테고리
• 정렬: 거리순 · 가까운 순
• 빈 상태 카피: "선택한 조건에 맞는 이벤트가 아직 없습니다. 다른 도시나 카테고리를 탐색해보세요."

새 플레이스 제안 CTA

웰니스 맵을 함께 만들어요 Sqnc는 전 세계의 움직임과 회복의 공간을 커뮤니티와 함께 발견하고 기록합니다. 좋은 플레이스를 알고 있다면 여기에 추가해 주세요. 등록되면 기여자로 함께 기록됩니다.

SOURCE — /place/create 폼 헤더

DESKTOP · 1440 × 2000

MOBILE · 390 × 2200

https://sqnc.global/post/list

커뮤니티 / 포스트 피드

Threads/X 류의 단일 컬럼 텍스트+이미지 소셜 피드

피드 카드 구성 (포스트 1개당)

1. 원형 아바타 + 닉네임 + 카테고리 칩(예: 음악 추천·유튜브·사진) + 상대시간(2일 전·21시간 전)
2. 본문 텍스트 (자유 작성)
3. 해시태그 라인 (#러닝인증 #오늘루틴 …)
4. 이미지 그리드 — 1·2·3·4+ 장에 따라 비율이 자동 변형 (최대 8장 썸네일)
5. 하단 액션: ♡ 좋아요수 · 💬 댓글수 · 🔖 북마크 (오른쪽 끝)

인기 태그 / 빠른 작성 가이드

• 인기 태그: 러닝인증 · 자기소개 · 오늘루틴 · 정보공유 · 같이해요 · 질문해요
• 각 태그를 누르면 작성 도우미 카피가 떠 있음 — 예: "오늘은 나를 어떻게 챙기셨나요? 나만의 루틴, 다른 멤버들과도 나눠요."
• 정렬: 인기순 · 최신순

레이아웃 메모

• 제목·헤더 영역에 "커뮤니티" 단일 타이틀 + 우측 새 포스트 작성 아이콘 ✏️
• 이미지 카드는 약간의 라운드(10px)와 어두운 보더로 분리감 부여
• 댓글/저장 후 토스트: "포스트가 삭제되었습니다 / 저장되었습니다 / 되돌리기"
• 번역 토글: "원문 보기 / 번역 보기" — 다국어 의식한 설계

DESKTOP · 1440 × 900

MOBILE · 390 × 844

https://sqnc.global/auth

로그인 / 회원가입

사진 풀블리드 배경 + 중앙 폼 카드, 한 화면에서 시작

구성

• 배경 이미지 — 러닝하는 사람들 흑백/저채도 사진 (시네마틱 톤)
• 상단 좌측 ← 뒤로가기 (모바일에서만)
• 중앙 카드(반투명 다크)
  • 로고 ||| sqnc
  • "지금 이 도시에서
    새로운 웰니스를 발견하세요" (헤드라인)
  • 이메일 입력 (placeholder: "이메일")
  • "계속하기" 풀폭 핀 CTA (검정→흰 반전)
  • 구분선 OR
  • Google / Apple / Kakao 버튼 (브랜드 컬러)
  • "로그인에 문제가 있나요?" 텍스트 링크
  • 약관 안내: "Google/Apple/Kakao/이메일로 계속하면 Sqnc의 이용약관 및 개인정보 처리방침에 동의하게 됩니다."

이후 인증 플로우 (카피로 추적)

• 인증 코드 입력 — "이메일로 인증 코드를 보냈습니다." / "다시 보내기"
• 비밀번호 설정 — "최소 8자 이상이며, 특수문자를 최소 1개 포함해야 합니다."
• 프로필 설정 — 이름·유저이름·생년월일·국가/도시·언어·소개·웹사이트·비공개 토글
• 약관 동의 — 만 14세 / 이용약관 / 개인정보 / 마케팅(선택)
• "프로필 저장 및 가입하기" 최종 CTA

반복적으로 등장하는 패턴 22가지

이 패턴들이 새 디자인에서도 그대로 살아남을지, 어떤 건 빠지고 어떤 건 대체될지를 결정하는 게 다음 단계의 핵심입니다.

친근체 + 짧은 문장 + 묵직한 한 줄

"~하세요 / ~해요 / ~괜찮습니다" 톤으로 부담 없이 권유하면서, 핵심 카피는 서술형 명사구로 단단하게 끊습니다. 영어를 거리낌 없이 섞고("드롭인 · 리트릿 · 빈야사"), 도시 이름과 활동을 구체적으로 호출합니다.

리디자인 전에 짚고 넘어갈 만한 것들

관찰만 한 것이고 평가는 아닙니다. 다만 새 디자인에서 결정해야 할 포인트들을 미리 좁혀둡니다.

• 01

  데스크톱이 사실상 "가운데 박힌 모바일"이다

  현재는 480~600px 단일 컬럼이 대형 모니터 가운데에 그대로 놓이고, 좌측에 아이콘 레일만 추가됨. 데스크톱 전용 2~3컬럼 레이아웃을 새로 짤지, 의도적으로 모바일-퍼스트를 유지할지가 첫 갈림길.

• 02

  기본 모드가 다크 단일이다

  CSS에는 light/dark 변수가 모두 정의돼 있지만, 실제 진입 시 다크가 강제됨. 라이트 모드까지 살릴 것인지, 다크를 메인으로 더 밀고 갈지 결정 필요.

• 03

  11색 액센트 팔레트가 거의 안 쓰이고 있다

  코드에는 11색 + 2개 그라디언트가 정의됐지만, 실제 화면에서는 노랑 마커와 라임 콜아웃 정도만 보임. 새 디자인에서 이 다채로움을 살릴지, 흑백+1 액센트로 좁힐지가 비주얼 톤을 결정.

• 04

  같은 카드 패턴이 6번 반복된다

  홈에 "추천 이벤트 → 인기 포스트 → 다가오는 이벤트 → 카테고리 → 도시 → 호스트 → 플레이스"가 모두 같은 가로 스크롤 카드 형태. 시각적 변별점을 더 만들지, 일관성을 유지할지 결정.

• 05

  맵이 핵심인데 진입 동선이 한 단계 깊다

  홈 → "맵에서 플레이스 더 보기"를 거쳐야 맵에 진입. 맵을 기본 진입점으로 옮기는 옵션도 고려할 만함.

• 06

  로그인 배경이 사진이라 무게가 무겁다

  시네마틱 다크 사진 + 작은 폼. 환영하는 인상보다 진중한 인상이 강함. 로딩 속도, 약관 가독성과의 트레이드오프 검토 가치.

• 07

  포스트 피드는 Threads/X에 가까운 단일 컬럼

  텍스트+이미지 그리드 중심. 인스타그램·핀터레스트 같은 그리드 피드로 갈지, 현재 구조를 유지할지가 사용자 첫인상을 크게 바꿈.

• 08

  한국어/일본어 듀얼 폰트(Pretendard / pretendardJP)

  국제화 의지가 명확함. 새 시스템도 폰트 폴백·자간을 두 언어 모두에서 검수해야 함.

• 09

  "기대돼요"·"필요해요" 같은 가벼운 보트

  기능 출시 전 인터레스트 측정용. 새 디자인에서도 빈 상태·예고 상태를 어떻게 풀지 결정 포인트.

• 10

  폼·온보딩 단계가 길다

  로그인→코드→비밀번호→프로필(8필드)→약관(4체크) 5단계. 어디를 압축하고 어디를 유지할지가 가입 전환의 핵심.

이번 분석에 사용한 자료

모두 같은 폴더 안에 저장돼 있어 새 창에서 그대로 참조할 수 있습니다.

이제 어떤 방향으로 가고 싶은지 알려주세요 — 톤(따뜻한 / 미니멀 / 익스피리먼탈), 컬러 방향(현 다크 유지 / 라이트 전환 / 듀얼), 타깃 디바이스(모바일·데스크톱 비중), 강조하고 싶은 페이지를 말씀해주시면 바로 새 창에서 시안 작업으로 넘어가겠습니다.