Personal Page Builder sample hero

Personal Page Builder

기존 링크 인 바이오 서비스의 한계를 개선하기 위해 만든 개인 프로젝트입니다. 사용자가 자신의 링크와 소개를 더 유연하게 구성하고, 실제로 바로 공유할 수 있는 개인 페이지 경험을 만드는 데 집중했습니다.

Period
2025.12 ~
Stack
Next.js, TypeScript, Supabase
Team
개인
Category
Web
Background

기존 링크 인 바이오 서비스는 템플릿과 표현 방식이 제한적이어서, 사용자가 자신의 정체성과 콘텐츠를 충분히 드러내기 어렵다는 한계가 있었습니다.

Goal

사용자가 링크, 소개, 콘텐츠 구성을 더 유연하게 편집하고 즉시 공유할 수 있는 개인 페이지 빌더를 만드는 것이 목표입니다. 간단한 설정만으로도 실제 사용 가능한 퍼블릭 페이지를 빠르게 만들 수 있도록 하는 데 집중했습니다.

Service Overview
나만의 고유한 페이지

나만의 고유한 페이지

페이지 제목, 설명, 링크, 메모, 지도, 이미지, 비디오 등 다양한 요소를 조합해 자신만의 페이지를 구성할 수 있습니다.

아이템 커스텀

아이템 커스텀

아이템의 크기, 색상, 글 정렬을 커스텀할 수 있습니다.

소셜 계정 연결

소셜 계정 연결

소셜 계정을 연결해 페이지에 자연스럽게 노출하고, 필요할 때 언제든 쉽게 수정할 수 있습니다.

페이지 설정

페이지 설정

페이지 핸들명과 페이지 접근 제한을 설정할 수 있습니다.

Key Features

일반 사용자

  1. 01고유 페이지 생성/수정/삭제
  2. 02페이지 내부에 본인을 드러낼 수 있는 아이템 추가
  3. 03아이템 커스텀 가능(색상, 크기, 위치)
  4. 04드래그 앤 드롭을 통한 아이템 정렬
  5. 05페이지 핸들 커스텀
  6. 06소셜 계정 연결
Contributions
AI 어시스트 워크플로우 활용
  • 초기 단계에 사용자 시나리오와 UX를 모델링하고, Codex를 활용해 구현과 핵심 아키텍처 의사결정을 검증
  • 도메인 문서 작성, 구현, 테스트, 맥락 문서화로 이어지는 AI-assisted 개발 워크플로를 설계
링크 메타데이터 추출 서버 제작
  • 기존 메타데이터 추출 서비스의 호출 제한과 유료 플랜 의존성이 불편해 자체 도구를 제작
  • Codex를 활용해 정적·동적 링크 메타데이터 추출을 위한 Express 서버 제작
사용자 인증 플로우 재설계 및 FCP 개선
  • 이메일 입력 후 계정 상태에 따라 로그인 수단을 분기하는 플로우를 설계해 소셜 전용 사용자의 비밀번호 오진입을 제거
  • 정적 랜딩 구조를 유지하도록 사용자 상태 분기 흐름을 재설계해 배포 환경 FCP를 모바일 7.3%, 데스크톱 3.6% 개선