SYSTEM BLUEPRINT

내 집을 꾸미고
이웃집에 들어갑니다

발표 무대에서 보여줄 화면 6개를 순서대로 정리한 스토리보드입니다

스토리보드란?

스토리보드는 개발에 들어가기 전에 어떤 화면이 어떤 순서로 이어지는지를 미리 그려 맞춰보는 문서입니다. 화면마다 무엇을 할 수 있고 그때 무엇이 저장되는지를 함께 적어, 발표 시연 순서를 그대로 따라갈 수 있게 했습니다.

  1. 로그인하고 아파트 타입을 골라 내 공간을 만드는 흐름
  2. 벽지·바닥재·가구를 바꿔 꾸미고 저장하는 흐름
  3. 공개된 이웃집에 들어가 둘러보고 방명록을 남기는 흐름

마지막까지 보시면 고정된 예산 안에서 이번에 만드는 화면이 정확히 몇 개이고 무엇이 빠지는지가 그림으로 정리됩니다.

내 집을 꾸미는 사용자 시나리오

들어와서, 고르고, 꾸미고, 저장합니다

처음 온 사람이 설명 없이 내 공간을 갖게 되는 다섯 걸음

로그인

이메일 또는 카카오로 들어옵니다

프로필

닉네임과 사진, 공개 범위를 정합니다

타입 선택

실제 아파트 2개 타입 중 하나를 고릅니다

꾸미기

벽지·바닥재·가구를 바꿔 배치합니다

저장

다시 들어와도 그대로 열립니다

내 집을 꾸미는 사용자 | 화면 01

로그인 · 프로필 설정

home-sketch.app/login
집꾸미기
내 공간이웃집인테리어 소재도움말
처음이신가요?회원가입
내 집을 꾸미러
돌아오셨네요
저장해 둔 공간은 로그인하면 꾸민 그대로 다시 열립니다.
이메일
minjun.k@naver.com 인증 완료
비밀번호
••••••••
로그인 상태 유지 비밀번호를 잊으셨나요?
로그인
또는
카카오로 3초 만에 시작
이메일로 가입
가입 시 이용약관과 개인정보 처리방침에 동의하게 됩니다. 시제품 단계라 수집 항목은 닉네임과 이메일뿐입니다.
프로필 설정 2단계 중 1단계
프로필 사진 JPG · PNG · 2MB 이하 사진 올리기
닉네임
민준네 집 5 / 12
사용할 수 있는 닉네임입니다
내 공간 공개 범위
공개이웃집 목록에 올라갑니다
나만 보기방문과 방명록이 닫힙니다
가입일2026년 9월 24일 (목)
지금까지 만든 공간1개
저장하고 시작

[화면 개요 및 목적]

시연이 시작되는 첫 화면입니다. 가입·로그인(R1)과 닉네임·프로필 이미지 등록(R2)을 한 화면에 묶어, 발표에서 화면을 두 번 넘기지 않아도 되게 했습니다. 카카오 로그인을 앞에 둔 이유는 발표장에서 계정을 새로 만들 필요가 없기 때문입니다.

[핵심 기능 로직]

이메일 인증 완료·입력 중·미설정 세 가지 상태를 뱃지로 구분해, 어디까지 됐는지 한눈에 보이게 했습니다. 오른쪽에서 정한 공개 범위가 이후 이웃집 목록에 이 집이 올라갈지를 결정합니다 — 뒤의 공개 공간 목록 화면과 바로 이어집니다.

  • 서버 없이 계정 관리
    Supabase Auth · 이메일 · 카카오 OAuth
  • 프로필 이미지 보관
    Supabase Storage
내 집을 꾸미는 사용자 | 화면 02

아파트 타입 선택

home-sketch.app/space/new
집꾸미기
내 공간이웃집인테리어 소재도움말
민준네 집
1단계 · 공간 만들기 어느 집에서 시작할까요?
모델러가 전달한 실제 아파트 평면입니다
선택한 뒤에도 언제든 바꿀 수 있습니다
84A형 선택됨
거실
침실 1
주방
침실 2
욕실
모델러 제공 평면 · 3D 파일 대기
전용 84.9㎡ 방 3 · 욕실 2
거실이 넓어 가구 배치를 보여주기 좋습니다. 발표 시연 기본값으로 권합니다.
59B형 선택 안 됨
거실
침실 1
주방
침실 2
욕실
모델러 제공 평면 · 3D 파일 대기
전용 59.8㎡ 방 2 · 욕실 1
작은 평형에서 벽지·바닥 변화가 더 크게 보입니다.
74C형 준비 중
거실
침실 1
주방
침실 2
욕실
모델러 제공 평면 · 3D 파일 대기
전용 74.2㎡ 방 3 · 욕실 1
3D 파일 수급 후 추가 예정. 이번 시연 범위에는 넣지 않습니다.
이어서 하기 · 84A형 거실 마지막 저장 어제 오후 9:14 · 가구 12개 · 벽지 라이트 오크
저장된 상태 그대로 복원
그대로 들어가기
공간은 계정당 3개까지 만들 수 있습니다 · 현재 1개 사용
나중에 하기
84A형으로 내 공간 만들기

[화면 개요 및 목적]

모델러가 전달하는 실제 아파트 2개 타입을 고르고 내 공간을 만드는 화면입니다(R3). 아래 "이어서 하기" 줄이 재접속 복원(R4)을 눈으로 증명합니다 — 발표 도중 새로고침이 나도 여기서 그대로 이어갈 수 있습니다.

[핵심 기능 로직]

세 번째 카드를 "준비 중"으로 둔 것은 이번 범위가 2개 타입이라는 약속을 화면에서 다시 확인시키기 위해서입니다. 제안서에서 말한 "먼저 자를 것을 정한다"가 화면에 그대로 나타난 자리입니다.

  • 평면별 3D 파일 교체
    glTF · GLB + Draco 압축
  • 이전 상태 이어보기
    Postgres 공간 레코드 조회
내 집을 꾸미는 사용자 | 화면 03

내 공간 3D 편집

home-sketch.app/space/84a/living
민준네 집 · 84A형 거실 저장됨 · 방금 전
1인칭 시점 상단 시점
저장
방 선택
거실 24.6㎡
침실 1 13.2㎡
침실 2 9.8㎡
주방 11.4㎡
현관 4.1㎡
배치한 가구 12개 거실 7 · 침실 5
거실 벽 · 테라코타 적용됨
3인 소파 · 선택됨
거실 60 fps
이동 회전 복제 삭제
소파 위치 X 2.4m · Y 1.1m · 회전 45°
벽지바닥재가구
거실 벽지 18종 전체보기
테라코타 적용 중
아이보리
세이지
라이트 오크
스톤 그레이
더스티 로즈 신규
이 방에 놓은 가구
3인 소파린넨 베이지
배치됨
원형 테이블오크
배치됨
플로어 램프블랙
배치 대기
저장하면 가구 위치와 벽지·바닥 선택만 기록됩니다. 다시 들어와도 이 화면 그대로 열립니다.
이대로 저장하기

[화면 개요 및 목적]

이 프로젝트의 대표 화면입니다. 실내 3D 렌더링, 실내 이동, 1인칭·상단 시점 전환, 방별 벽지·바닥재, 가구 배치·이동·회전·삭제, 저장과 복원을 한 화면에서 다룹니다. 벽 한쪽만 새 색으로 칠해진 순간을 잡아 고른 색이 방에 적용된다는 것이 바로 읽히게 했습니다.

[핵심 기능 로직]

저장은 3D 화면을 통째로 담지 않고 가구의 좌표·회전값과 방별 벽지·바닥재 선택만 기록합니다. 데이터가 가벼워 복원이 즉시 끝나고, 나중에 실제 가구 상품을 붙일 때 이 목록에 상품 코드만 더하면 됩니다.

  • 브라우저에서 3D 실내 표시
    Three.js · WebGL
  • 가벼운 저장과 즉시 복원
    Postgres JSONB 배치 목록
  • 벽지·바닥 즉시 반영
    머티리얼 텍스처 교체
이웃집을 둘러보는 사용자 시나리오

찾아가서, 둘러보고, 흔적을 남깁니다

공개된 남의 집에 들어가 방명록까지 이어지는 다섯 걸음

목록 보기

공개된 집을 타입별로 훑습니다

입장

한 집을 골라 들어갑니다

둘러보기

방향키로 이동하며 실내를 봅니다

시점 전환

1인칭과 상단 시점을 오갑니다

방명록

다녀간 흔적을 글로 남깁니다

이웃집을 둘러보는 사용자 | 화면 01

공개 공간 목록

home-sketch.app/explore
집꾸미기
내 공간이웃집인테리어 소재도움말
이웃집 둘러보기 오늘 공개된 집 1,284
전체84A형59B형 방문 많은 순
테라코타 거실 84A형 공개
성수동 감자 3분 전
2,417 86
세이지 거실 59B형 공개
민트초코집 12분 전
1,908 54
라이트 오크 거실 84A형 공개
해뜨는 거실 어제
864 31
스톤 그레이 거실 59B형 비공개
김*준의 집 2일 전
412 9
오늘 새로 꾸민 집 37채 · 84A형이 62%
벽지·바닥 조합이 비슷한 집끼리 묶어 보여드립니다
더스티 로즈 거실 84A형 공개
작업실 겸 집 1시간 전
3,051 127
아이보리 거실 59B형 공개
오후 세 시 6시간 전
739 22
세이지 거실 84A형 공개
열두평 서재 어제
1,166 48
라이트 오크 거실 59B형 새로 꾸밈
이*서의 집 방금 전
258 5
공개로 설정한 집만 목록에 올라옵니다 · 비공개 집은 주인만 들어갈 수 있습니다
1 2 3 다음

[화면 개요 및 목적]

다른 사용자가 공개한 집 목록입니다(R12). 카드마다 실제 그 집의 벽지·바닥 색이 그대로 미리보기로 들어가, 목록만 훑어도 "집마다 다르게 꾸몄다"는 것이 보입니다. 발표에서 서비스의 확장 가능성을 설명하기 좋은 장면입니다.

[핵심 기능 로직]

공개로 설정한 집만 목록에 올라오고 비공개 집은 주인만 들어갑니다. 앞의 프로필 화면에서 고른 공개 범위가 여기에 그대로 반영됩니다. 정렬과 타입 필터는 발표에서 원하는 집을 바로 찾기 위한 최소 기능만 넣었습니다.

  • 공개 집만 골라 보기
    Postgres Row Level Security
  • 미리보기 즉시 표시
    저장된 색상값 기반 카드 렌더
이웃집을 둘러보는 사용자 | 화면 02

이웃집 방문 · 둘러보기

home-sketch.app/visit/sujeong-potato
거실 · 24.6㎡
주방 쪽 통로
세이지 그린 벽지
원목 협탁
성수동 감자님의 집 84A형 거실 방문 중 · 마지막 꾸밈 3분 전 · 오늘 방문 37
보기 전용
이 집에 쓰인 인테리어
벽지세이지 그린
바닥재내추럴 오크
포인트테라코타 쿠션
방문2,417
방명록86
가구18개
이 조합 내 공간에 담기
이동 WASD 시선 마우스 드래그 위치 거실 · X 3.1m 화면 60 fps
1인칭 시점 상단 시점
좋아요
방명록 남기기

[화면 개요 및 목적]

남의 공간에 들어가 둘러보는 화면입니다(R13). 실내 이동(R6)과 1인칭·상단 시점 전환(R7)이 방문 상태에서도 똑같이 동작합니다. 화면 대부분을 3D 뷰에 내주고 조작 안내를 아래에 깔아, 발표에서 마우스와 키보드만으로 시연이 이어지게 했습니다.

[핵심 기능 로직]

방문은 여러 명이 동시에 접속하는 방식이 아니라 저장된 그 집의 상태를 불러와 들어가는 방식입니다. 보이는 경험은 같지만 개발량과 발표 당일 사고 위험이 크게 줄어듭니다 — 제안서에서 예산을 맞춘 핵심 판단이 이 화면입니다. 남의 집이므로 편집 도구는 잠기고 "보기 전용" 뱃지가 뜹니다.

  • 남의 집도 같은 속도로 열림
    저장 상태 불러오기 방식 방문
  • 시점 전환과 실내 이동
    Three.js 카메라 컨트롤
이웃집을 둘러보는 사용자 | 화면 03

방명록

home-sketch.app/visit/sujeong-potato/guestbook
집꾸미기
내 공간이웃집인테리어 소재도움말
이웃집 · 성수동 감자님의 집 방명록 86
최근 8분 전에 새 글이 올라왔습니다
이 집 다시 둘러보기
성수동 감자님의 집 84A형 · 방문 2,417 · 방명록 86
공개
이 집을 다녀간 사람
김*준 5분 전
이*서 22분 전
박*현 1시간 전
최*림 어제
방문 기록은 집주인에게만 보입니다. 시제품 단계라 알림은 화면 안에서만 표시합니다.
전체 글 86개
최신순 오래된순
민준네 집 작성 중
거실 벽 테라코타 색이 진짜 예뻐요. 저희 집 59B형에도 한번 올려볼게요|
비속어와 연락처는 자동으로 걸러집니다
44 / 200
남기기
민트초코집 8분 전
상단 시점으로 보니까 주방 동선이 확 이해되네요. 저도 소파 위치 이렇게 바꿔봐야겠어요.
집주인 답글 들러주셔서 고맙습니다. 소파는 창 쪽으로 45도 돌린 게 포인트예요.
해뜨는 거실 어제
같은 84A형인데 벽지 하나로 이렇게 달라 보이는 게 신기합니다 ㅎㅎ 라이트 오크 조합도 궁금해요.
김*준 2일 전
방명록 남기고 갑니다. 다음에 또 놀러올게요.
방명록은 집주인이 지울 수 있고, 신고된 글은 자동으로 가려집니다 더 보기

[화면 개요 및 목적]

방문한 공간에 글을 남기고 읽는 화면입니다(R14). 발표에서 "사람이 다녀간 서비스"로 보이게 하는 마지막 장면이라, 글 목록과 집주인 답글까지 한 화면에 담았습니다.

[핵심 기능 로직]

작성 중·등록 완료·집주인 답글 세 상태를 구분해 보여줍니다. 방문자 이름은 마스킹해 노출을 줄였고, 연락처와 비속어는 등록 전에 걸러집니다. 방문 기록은 집주인에게만 보이도록 두어 시제품 단계에서 개인정보 부담을 낮췄습니다.

  • 글 등록 즉시 목록 반영
    Postgres 방명록 테이블
  • 부적절한 글 사전 차단
    등록 전 문자열 필터
시나리오

| 화면 01

[화면 개요 및 목적]

[핵심 기능 로직]

    | 화면 02

    [화면 개요 및 목적]

    [핵심 기능 로직]

      | 화면 03

      [화면 개요 및 목적]

      [핵심 기능 로직]