App 07친구 모임 · 소셜 이벤트 앱

자리
JARI

자리

‘언제 한번’을 진짜 약속으로

친구 모임을 성사 인원으로 엽니다. 정한 인원이 모이면 그 순간 짠! 하고 확정되고, 마감까지 안 모이면 조용히 접힙니다. 날짜 투표, 조건부 참석, 당일 막차 시계, 차수별 정산 초안까지 한 자리에서.

성사 인원조건부 콜막차 시계낮 · 밤

분야: 소셜 · 이벤트
대상: ‘언제 한번 보자’가 자꾸 미뤄지는 친구 모임, 총무를 맡는 사람
작업 범위: 서비스 기획 · 리서치, UX/UI 디자인, 인터랙티브 HTML 프로토타입, 디자인 시스템(토큰 · 아이콘 · 서체), 자동 QA, Flutter 이전 가이드
구분: 자체 기획 컨셉 프로젝트 · 모바일 앱(iOS · Android)

Overview

무엇을 풀었나

대상 — ‘언제 한번 보자’가 자꾸 미뤄지는 친구 모임, 총무를 맡는 사람

01문제

“언제 한번 밥 먹자”가 흐지부지되는 건 ‘다들 가면 나도 간다’는 숨은 조건 때문입니다. 먼저 손 들기는 부담스럽고 거절은 더 부담스럽습니다. 정산은 총무 한 사람의 일이 됩니다.

02해결

성사 인원을 정하고, 모이면 짠! 확정, 안 모이면 조용히 접힙니다. 패스는 이름 없이 숫자로만 보입니다. “다른 사람이 N명 이상이면 갈게” 조건부 콜이 연쇄로 자리를 채웁니다.

03디자인 언어

자리표. 펠트 초록 테이블 둘레에 자리가 놓이고, N번째 자리까지 점선 성사선이 그어집니다. 다 차면 테이블이 크림색으로 바뀌며 짠!, 못 채우면 반원으로 접힙니다.

Key features

핵심 기능

자리을(를) 다르게 만드는 4가지

01

성사 인원 · 짠 · 조용한 접힘

모임을 열 때 ‘몇 명이 모이면 성사’인지 정합니다. N명이 콜하는 순간 짠! 하고 확정되고, 마감까지 모이지 않으면 아무도 민망하지 않게 조용히 접힙니다.

패스는 이름 없이 숫자로만
성사 · 만석 · 접힘 상태별 자리표

02

조건부 콜

“다른 사람이 N명 이상이면 갈게.” 숨어 있던 조건을 꺼내 놓으면, 조건이 충족될 때 연쇄로 자리가 채워집니다(Granovetter 문턱 모델).

조건부 참석의 연쇄 계산을 모델 테스트로 검증
고민 중 → 조건부 → 콜 흐름

03

날짜 투표 자동 확정

날짜가 정해지지 않았다면 후보를 올려 투표합니다. 가장 먼저 성사 인원에 닿은 날짜가 자동으로 확정됩니다.

후보 날짜별 자리표
방장 도구 · 마감 · 리마인드

04

당일 레이어 · 막차 시계

모임 당일에는 밤 테마의 ‘오늘의 자리’로 바뀝니다. 각자 입력한 집 근처 역으로 막차 시각을 보여 주고, 위치 권한은 쓰지 않습니다. 끝나면 출석 기준 차수별 정산 초안이 만들어집니다.

위치 권한 없이 막차 계산
출석 = 정산 초안 · 계좌 · 금액 복사

All screens

전체 화면 100장

모든 화면은 실제로 동작하는 HTML 프로토타입에서 자동 촬영했습니다. 화면을 누르면 크게 볼 수 있어요.

크게 보기에서 ← → 키 또는 좌우로 밀어 넘기기

홈

4

01홈 · 자리 탭
02홈 · 전체
42홈 · 빈 상태
45홈 · 글자 130%

자리 상세

10

03자리 상세 · 날짜 고정형
04자리 상세 · 전체
05자리 상세 · 날짜 투표형
06날짜 투표 · 고르기
07방장 · 성사
08자리 상세 · 만석
09자리 상세 · 접힘
10자리 상세 · 콜 이후
46자리 상세 · 글자 130%
48방장 · 모으는 중

짠

1

11짠 · 성사되는 순간

자리 펴기 · 초대

8

12자리 펴기 · 무엇
13자리 펴기 · 언제
14자리 펴기 · 어디서
15자리 펴기 · 성사 인원
16자리 펴기 · 미리보기
17초대장 보내기
18친구가 받는 웹 화면
49자리 펴기 · 날짜 투표

오늘의 자리

3

19오늘의 자리 · 시작 전
20오늘의 자리 · 밤
21오늘의 자리 · 막차 시계

정산

4

22정산 탭
23차수별 정산 · 총무
24차수별 정산 · 사람별
25차수별 정산 · 보낼 사람

모임

3

26모임 탭
27모임 상세
28모임 · 지난 자리

나 · 알림 · 설정

5

29나 탭
30알림
31지난 자리
43설정 · 화면
44설정 · 막차

온보딩

4

32온보딩 1 · 첫 화면
33온보딩 2 · 성사 인원
34온보딩 3 · 약속
35온보딩 4 · 설정

시트

8

36시트 · 사람
37시트 · 방장 도구
38시트 · 성사 인원 바꾸기
39시트 · 차수 추가
40시트 · 접기
41시트 · 테마
47시트 · 고민 중 · 조건부 콜
50시트 · 정산 알림

Design system

디자인 시스템

색 · 서체 · 아이콘을 DTCG 토큰 JSON과 SVG 에셋으로 정리해 그대로 개발에 넘깁니다.

색 라이트 · 다크 토큰

낮 · 세이지 방

room#ECEFE7

text#0E1D17

action#0F3A2D

me-text#5B40BF

urgent#B03E24

공통 · 펠트와 크림

펠트#0F3A2D

펠트 raised#174B3A

크림#F4EEDC

라일락#C9B6FF

라일락 위 글자#170F33

밤

room#0B1814

text#F1EBDA

action#C9B6FF

me-text#DCD1FF

urgent#FF9A80

자리 8색

seat 1#EADFC2

seat 2#A3DCC0

seat 3#FFBFA6

seat 4#AFCBFF

seat 5#F3DA8F

seat 6#F2B6CB

seat 7#CBDDA0

seat 8#DCC6A3

서체 OFL 라이선스

짠! 4/4

Gasoek One디스플레이 · 짠 · 큰 숫자

금요일 동기 저녁

Paperlogy (400 – 900)한글 제목 · 본문 · UI

브랜드 · 에셋

앱 아이콘펠트 위 자리표 — 앱 아이콘 9종

워드마크Gasoek One 윤곽선 · 크림 버전 별도

자리표 SVG 10종 — 자리표 SVG 10종모으는 중 · 조건부 · 성사 · 만석 · 접힘 · 현장 도착

아이콘 74종 — 아이콘 74종SVG · 24 그리드

Deliverables & QA

산출물과 품질 검수

보기 좋은 시안에서 멈추지 않고, 개발자가 바로 옮길 수 있는 기준본을 만듭니다.

50화면 상태
(탭 4 · 스택 7 · 모달 5 · 시트 10)

100스크린샷
낮 50 · 밤 50

320디자인 토큰 (DTCG)

74SVG 아이콘 · 앱 아이콘 9종

13 / 45흐름 13개 · 45단계
자동 검증 통과

147WCAG 대비 검사
전 항목 통과

671터치 영역(48 이상) 검사
미달 0

92360dp · 글자 130% 상태
넘침 0

동작하는 HTML 프로토타입

탭 자리 이동, 스프링 스택 전환, 끌어 닫는 시트, 짠 · 접힘 · 펴기 애니메이션, 조건부 연쇄까지 동작합니다. 360 · 390 · 412 폭과 글자 90~130%에 대응했습니다.

Flutter 이전 가이드

토큰 320개 → 낮 · 밤 해석본, 화면 명세 19편, 컴포넌트 대응표, 한글 줄바꿈 이슈 대응까지 13개 장으로 정리했습니다. 정산은 앱이 돈을 들고 있지 않는 구조로 설계했습니다.

기술 스택

프로토타입 · 자동 검수

React 19TypeScriptViteTailwind CSS v4MotionZustandPlaywright