<aside> 📌 필수 단계

• SETUP — 처음 1회 설정 (템플릿 복제부터 고유 URL 발급·임베드까지)
• HOW TO USE — Mini Profile DB를 채워 내 프로필을 완성하는 법
• 위젯·공개 페이지 사용법 — 공개 프로필 페이지와 노션 임베드 동작 방식
• 참고
• REFERENCE — Mini Profile DB 속성·행 규칙 상세
• FAQ — 문제 해결 </aside>

<aside> ⛔ 절대 하면 안 되는 것

• Mini Profile DB 이름·속성 이름 변경(Name · Type · Value · URL · Image · Order) → 위젯이 데이터를 못 읽어 프로필이 통째로 비어 보여요 (스크린샷 참고)

• 옵션 이름 변경(profile · intro · sns · album) → 행 분류가 깨져서 프로필/자기소개/SNS/앨범이 엉뚱한 자리에 가거나 사라져요

  

• Mini Profile DB · 페이지 삭제 → 공개 페이지와 노션 임베드 위젯이 함께 멈춰요 </aside>

STEP 01부터, 위→아래 순서로 진행해 주세요

임의로 단계를 건너뛰면 토큰 연결이 꼬여서 온보딩에서 DB가 안 보이고, 처음부터 다시 해야 하는 상황이 생겨요🥹 오류가 생기면 setp 01부터 다시 진행해 주세요

STEP 01 : SETUP

① SETUP

미니 프로필은 내 노션의 Mini Profile DB 1개와 온보딩 생성기로 움직여요. 처음 한 번만 아래 순서대로 설정하면 됩니다.

<aside> 📌 반드시 STEP 1부터 순서대로 진행해 주세요.

특히 토큰 연결(STEP 2~3)을 건너뛰면 온보딩에서 Mini Profile DB가 보이지 않아요.

</aside>

STEP 1 · 템플릿 복제하기

1. 공유받은 미니 프로필 템플릿 페이지를 엽니다.
2. 오른쪽 위 Duplicate / 복제를 눌러 내 워크스페이스로 가져옵니다.
3. 복제된 내 페이지에서 작업을 시작해 주세요.

<aside> 📌 원본이 아니라 내 워크스페이스에 복제한 페이지에서 진행해야 DB 연결 권한을 줄 수 있어요.

복제하면 Mini Profile DB 이름과 속성이 이미 맞춰져 있어요. 템플릿은 1회만 복제해 주세요.

</aside>

STEP 2 · Notion API 토큰 발급하기

미니 프로필 위젯이 내 노션 DB를 읽으려면 Notion Integration 토큰이 필요해요. 흐름은 연결 만들기 → 토큰 복사 → 저장 3단계입니다.

API 연결 가이드 에 따라서 토큰을 발급받은 뒤 템플릿과 연결해 주세요

<aside> 🔒 토큰은 비밀번호와 같아요. 공개 페이지·스크린샷·SNS에 그대로 올리지 마세요.

</aside>

STEP 3 · 온보딩 ① 토큰 입력하기

<aside> 🖼️ 온보딩 Step1 — Notion 통합 토큰 입력 화면(TOKEN 단계, 입력칸은 password 처리)

</aside>

1. 미니 프로필 온보딩 페이지(https://miniprofile-black.vercel.app/onboarding) 에 접속합니다.
2. TOKEN 단계에서 STEP 2의 ntn_ 토큰을 붙여넣습니다. (앞뒤 공백 없이)
3. DB 불러오기를 누르면 다음 단계로 넘어가요.

<aside> 📌 예전에 만들어 둔 미니 프로필 위젯 URL이 있다면?

온보딩 첫 화면의 기존 위젯 수정 (URL 불러오기) 탭에 그 URL을 붙여넣으면 토큰·DB·디자인·색상이 그대로 복원돼요. 색상 설정 일부를 바꾸고 싶을 때 이용해 주세요.

</aside>

STEP 4 · 온보딩 ② DB 연결 확인하기

<aside> 🖼️ 온보딩 Step2 — DB 연결 확인 화면(자동 매칭됨 문구와 Mini Profile DB 드롭다운이 보이게)

</aside>

1. DATABASE 단계에서 Mini Profile DB가 자동으로 매칭됐는지 확인합니다.
2. 라벨에 **(자동 매칭됨)**이 뜨고 드롭다운에 Mini Profile DB가 선택돼 있으면 정상이에요.
3. **(직접 선택)**으로 뜨면 매칭이 안 된 거예요. 드롭다운에서 Mini Profile DB를 직접 골라 주세요.

<aside> 📌 STEP 3에서 연결한 직후에는 목록에 DB가 안 보일 수 있어요.

5~10분 정도 두고 온보딩 페이지를 완전히 닫았다가 다시 접속해 주세요. 이 단계에서 DB가 연결 안 된 채로 넘어가 오류 문의 주시는 일이 정말 많아요.

</aside>

STEP 5 · 온보딩 ③ 디자인 설정하기

DESIGN 단계에서 위젯 색·배경·폰트를 정해요. 오른쪽 **LIVE 프리뷰(목데이터)**로 실시간 확인하면서 맞출 수 있어요.

<aside> 🖼️ 온보딩 Step3 — 디자인 화면(테마 프리셋 + 세부 색상 슬롯 + 우측 LIVE 프리뷰가 함께 보이게)

</aside>

• 상단바 문구 — 위젯 맨 위 타이틀바 텍스트예요. 비워 두면 DB의 닉네임(profile 행 Name)이 표시돼요. (최대 40자)
• 테마 프리셋 6종 — 클릭하면 아래 세부 색상 7개가 한 번에 채워져요: 모노 · 핑크 · 보라 · 그린 · 블루 · 크림
• 세부 색상 7슬롯 — 프리셋을 고른 뒤 하나씩 미세조정할 수 있어요.
  • 창 배경 — 위젯 창 안쪽 배경색
  • 선·기본 글자 — 창·탭·구분선·닉네임·라벨 색
  • 상단바 글자 — 타이틀바 닉네임 글자색
  • 프로필 원 테두리 — 아바타를 감싼 원형 테두리 색
  • 포인트 (탭·SNS 카드) — 활성 탭 배경 + SNS 링크 카드 배경색
  • 포인트 위 글자 — 활성 탭/SNS 카드 위에 얹히는 글자색
  • 보조 글자 — 바이오·자기소개 값·구분자·앨범 캡션 색
• 페이지 배경색 프리셋 6종 + 커스텀 hex — 위젯 바깥 페이지 배경이에요: 라이트 그레이 · 웜 아이보리 · 페일 핑크 · 민트 · 스카이 · 버터
• 폰트 2종 — Pretendard (한글) / Monospace (레트로). 자기소개 리스트는 폰트와 무관하게 항상 monospace로 보여요.
• 다크모드(Notion 다크 배경) — 켜면 페이지 배경만 Notion 다크(#191919)로 바뀌어요.

<aside> 📌 Q. 여기서 정한 설정은 어디에 저장되나요?

모든 디자인 설정은 발급되는 위젯 URL 안에 담겨요. 그래서 나중에 색이나 폰트를 바꾸려면 온보딩 첫 화면의 기존 위젯 수정으로 URL을 불러와 다시 발급해야 반영돼요.

</aside>

STEP 6 · 온보딩 ④ 고유 URL 발급하기

<aside> 🖼️ 온보딩 Step4 — 주소 입력 후 "사용 가능한 주소입니다" 상태 화면

</aside>

1. URL 발급 단계에서 원하는 주소를 입력합니다. (소문자·숫자·하이픈 3~30자)
2. 입력하면 실시간으로 중복을 확인해요. 사용 가능한 주소입니다가 뜨면 OK.
3. URL 발급을 누르면 배포주소/내주소가 만들어져요. 복사해서 저장해 두세요.
   • 앞의 https://miniprofile-black.vercel.app/ 는 변경 불가입니다

<aside> ⚠️ 한 번 발급한 주소(slug)는 다시 쓸 수 없어요.

발급 후 설정을 바꾸려면 ① 새 주소로 다시 발급하거나 ② 온보딩 첫 화면의 기존 위젯 수정으로 URL을 불러와 디자인만 바꿔 새 주소로 발급하면 돼요. api · onboarding · widget · fonts는 예약된 주소라 쓸 수 없어요.

</aside>

STEP 8 · 결과물 활용하기

• ① 공개 프로필 페이지로 공유 — 이 주소를 그대로 트위터·인스타 프로필 링크 등에 넣으면, 누구나 내 미니 프로필을 볼 수 있어요.
• ② 노션에 임베드 — 같은 주소를 내 노션 페이지에 붙여넣고 **임베드 만들기(Create embed)**를 선택하면 프로필 카드가 노션 안에 들어가요. 모서리를 드래그해 크기를 맞춰 주세요.

<aside> 📌 임베드/공개 페이지 모두 항상 최신 DB를 보여줘요.

프로필 내용을 노션 DB에서 고치면, 페이지를 새로고침할 때 바로 반영돼요(즉시~수초). 별도 재발급은 필요 없어요. 단, **디자인(색·폰트·배경)**을 바꿀 때만 URL 재발급이 필요해요.

</aside>

STEP 9 · 동작 확인하기

1. Mini Profile DB에서 profile 행의 Name(닉네임)을 내 것으로 바꿔 봅니다.
2. 공개 페이지(또는 임베드)를 새로고침해 바뀐 내용이 뜨는지 확인해요.
3. 반영에는 새로고침 후 즉시~수초 걸릴 수 있어요.

<aside> ✅ 여기까지 왔다면 셋업 완료! 🎉

이제 HOW TO USE 탭에서 프로필 내용을 채워 볼게요.

</aside>

STEP 02 : HOW TO USE

위젯·공개 페이지 사용법

REFERENCE

FAQ