본문 바로가기
데브파이브
초기화
좌우명에 대한 이야기를 해주세요
이야기가 막힐 때 눌러보세요
얗게 닦아내고 나니까, 묘하게 꽉 막혔던 숨통
이 트이더라고. 그때 깨달았지. 가만히 앉아 고
민만 해봤자 답도 없는데, 일단 움직여서 눈앞
걸 말이야. 그래서 요즘도 뭔가 꽉 막힌 기분이
들 때면 무작정 자리에서 일어나 주변부터 쓱쓱
닦아. 그게 내가 복잡한 세상을 지금까지 버텨
온 아주 단순하고 확실한 비결이야.
작성 완료
일시 정지
기록공간

본 프로젝트는 사용자가 자신의 삶과 이야기를 질문에 답하는 방식으로 3개월간 집필하고, 이를 세상에 단 하나뿐인 실물 책으로 제작·배송해주는 서비스 '기록공간'의 웹·앱 플랫폼을 풀스택으로 구축하는 작업입니다. 단순한 글쓰기 툴을 넘어, 작가(사용자)가 이야기를 쓰는 전 과정을 함께하는 동행인 시스템, AI 기반 소제목 추천·이야기 요약·병렬 처리 기능, 선물 코드 및 B2B 기업 맞춤 코드 체계, 관리자 어드민까지 포함한 통합 플랫폼을 구현했습니다. 고령자·비전문 사용자를 포함한 다양한 이용자가 글쓰기 여정을 완성할 수 있도록 직관적인 UX 흐름을 설계하고, 삼성생명 등 B2B 기업 파트너십 확장을 위한 기업 전용 커스터마이징 구조까지 함께 구축했습니다.

제작 기간2025. 12 - 2026. 04
고객사LivU
사용 기술React.js, TypeScript, Vespera, Rust, FastAPI, Python, Toss Payments
서비스
미리보기
기록공간
( 90일 남음
동행형 스탠다드
• 담담체
설레는 첫 페이지가 열렸어요
가장 쉬운 방법으로 내 이야기를 완성해보세요.
기록공간에서는 목소리가 곧 글이 됩니다.
첫번째 이야기 시작하기
원하는 주제를 눌러 이야기를 시작해보세요.
• 새로운 주제가 도착했어요
은지 여자로 태어나고 싶은지, 그 이유
다시 태어난다면 남자로 태어나고 싶
에 대해 이야기해주세요.
인지, 즉흥적으로 다니는 편인지 여행
여행을 갈 때 계획을 철저히 세우는 편
스타일에 대해 이야기해주세요.
부모님의 뒷모습을 보며 문득 '늙으셨
구나' 하고 가슴이 덜컥했던 순간에 대
해 이야기해주세요
+
더 많은 주제를 보고싶어요
_ 제가 직접 주제를 정할게요
소중한 인연에게
우리가 함께한 순간, 책으로 남길 수 있다면.
'기록공간'을 선물하세요
2/3명
함께 이야기할 동행인
관리
+
초대하기
홍길동
홍길동
이렇게 이용해 볼까요?
이야기 쓰기
책 만들기
카테고리명
가이드 이름
가이드 번호 #1
가이드 번호 \1
1, 가이드 텍스트
가이드 텍스트 1, 가이드 텍스트
가이드 이름
가이드 텍스트 1, 가이
1, 가이드 텍스트
이야기
도서
동행인
화면에 마우스를 올려보세요!
고객 요구사항
& 프로젝트 방향
클라이언트의 인터뷰 및 협의를 통해 프로젝트의 핵심 요구사항을 도출하였으며, 인사이트를 바탕으로 사용자 경험과 브랜드 관점에서 개선이 필요한 5가지를 기반으로 설계하였습니다.
1.
질문 기반 집필부터 AI 교정, 목차 생성, 책 제작·배송까지 이어지는 단일 이야기 완성 흐름 구현
2.
동행인 초대, 관계 설정, 추천사 작성 기능을 통해 함께 참여하는 집필 경험 제공
3.
상품 결제와 선물 코드 발급·공유 기능으로 개인 구매와 선물 흐름을 자연스럽게 연결
4.
기업 전용 코드와 로고·웰컴 팝업 커스터마이징으로 B2B 확장 구조 구축
5.
어드민 데이터 관리와 AI 병렬 처리 고도화로 운영 효율성과 서비스 완성도 강화
타이포 그래피
& 컬러 시스템
사용자의 시각적 편의를 고려한 명도 대비와 체계적인 컬러 시스템을 구축하였으며, 확장이 용이한 타이포그래피와 공통 컴포넌트를 설계하여 브랜드의 일관된 경험을 구현하였습니다.섹션: typo
폰트: Pretendard
웨이트 스케일: ExtraBold | Bold | SemiBold | Medium | Regular
샘플: Aa
타이포그래피 스케일
스타일	크기	샘플 텍스트
h1	36px	당신의 이야기를 한권의 책으로
Title	30px	당신의 이야기를 한권의 책으로
Caption	15px	당신의 이야기를 한권의 책으로
Menu	13px	당신의 이야기를 한권의 책으로섹션: color
메인 컬러
이름	HEX
Primary	#752D2D
Main Bg	#EAE3D7
Secondary	#D7E4DA
그레이스케일
HEX
#FFFFFF
(밝은 회색)
(연회색)
#868686
(진한 회색)
(더 진한 회색)
#000000섹션: typo
폰트: Pretendard
웨이트 스케일: ExtraBold | Bold | SemiBold | Medium | Regular
샘플: Aa
타이포그래피 스케일
스타일	크기	샘플 텍스트
h1	36px	당신의 이야기를 한권의 책으로
Title	30px	당신의 이야기를 한권의 책으로
Caption	15px	당신의 이야기를 한권의 책으로
Menu	13px	당신의 이야기를 한권의 책으로섹션: color
메인 컬러
이름	HEX
Primary	#752D2D
Main Bg	#EAE3D7
Secondary	#D7E4DA
그레이스케일
HEX
#FFFFFF
(밝은 회색)
(연회색)
#868686
(진한 회색)
(더 진한 회색)
#000000
타이포 그래피
& 컬러 시스템
사용자의 시각적 편의를 고려한 명도 대비와 체계적인 컬러 시스템을 구축하였으며, 확장이 용이한 타이포그래피와 공통 컴포넌트를 설계하여 브랜드의 일관된 경험을 구현하였습니다.섹션: typo
폰트: Pretendard
웨이트 스케일: ExtraBold | Bold | SemiBold | Medium | Regular
샘플: Aa
타이포그래피 스케일
스타일	크기	샘플 텍스트
h1	36px	당신의 이야기를 한권의 책으로
Title	30px	당신의 이야기를 한권의 책으로
Caption	15px	당신의 이야기를 한권의 책으로
Menu	13px	당신의 이야기를 한권의 책으로섹션: color
메인 컬러
이름	HEX
Primary	#752D2D
Main Bg	#EAE3D7
Secondary	#D7E4DA
그레이스케일
HEX
#FFFFFF
(밝은 회색)
(연회색)
#868686
(진한 회색)
(더 진한 회색)
#000000섹션: typo
폰트: Pretendard
웨이트 스케일: ExtraBold | Bold | SemiBold | Medium | Regular
샘플: Aa
타이포그래피 스케일
스타일	크기	샘플 텍스트
h1	36px	당신의 이야기를 한권의 책으로
Title	30px	당신의 이야기를 한권의 책으로
Caption	15px	당신의 이야기를 한권의 책으로
Menu	13px	당신의 이야기를 한권의 책으로섹션: color
메인 컬러
이름	HEX
Primary	#752D2D
Main Bg	#EAE3D7
Secondary	#D7E4DA
그레이스케일
HEX
#FFFFFF
(밝은 회색)
(연회색)
#868686
(진한 회색)
(더 진한 회색)
#000000