디자인 벤치마킹 (쏠)

원본: KKIRI_DESIGN_BENCHMARK.md

작성: 쏠 · 2026-09-05
대상: OUTBOX/KKIRI/mockup/
비교: Doodle · Rallly · Loomio · Slido · Typeform · Airbnb Shared Wishlists

1. 결론부터

현재 끼리 목업은 흐름과 기능은 탄탄하지만, 보이는 방식은 “모바일 설문 + 계산 결과표”에 가깝다. 그래서 핵심 차별점인 “각자의 속마음을 지키면서 AI 대리인이 타협점을 찾는다”가 기능 설명으로는 보이지만 제품 인상으로는 약하다.

개선 방향은 새 장식을 더하는 것이 아니다. 화면 전체를 다음 세 막으로 다시 묶는 것이다.

1. 나만의 속마음 — 편안하고 안전하게 답한다.
2. 대리인 조율 — 원문을 공개하지 않고 지켜야 할 조건과 양보 가능한 조건을 맞춘다.
3. 우리의 결정 — 왜 이 안인지 이해하고 익명으로 재확인한다.

한 문장 디자인 원칙:

설문처럼 묻고, 채팅처럼 꾸미고, 점수표처럼 끝내지 않는다. “봉인된 의견들이 안전한 교집합을 만드는 과정”을 보여 준다.

2. 현재 화면 진단

잘된 점

• 홈에서 “답변은 아무에게도 보이지 않는다”를 첫 행동 전에 약속한다.
• 한 화면 한 질문, 큰 선택 카드, 하단 고정에 가까운 주요 버튼은 모바일 입력에 적합하다.
• 대기·마감·미응답·합의 불가·재조율 상태까지 빠뜨리지 않았다.
• 공동 결과와 본인만 보는 대리인 리포트를 분리했다.
• 최종 확정을 AI 추천과 분리하고, 사람에게 다시 묻는다.

가장 먼저 고칠 점

1. 하드 제약이 너무 작게 보인다.
   후보를 탈락시키는 중요한 선택이 일반 옵션 아래의 체크박스 토글이다. 사용자는 “선호”와 “절대 불가”의 결과 차이를 과소평가할 수 있다.

1. 조율 화면이 신뢰보다 연출을 앞세운다.
   떠다니는 🧠·🤝·💬와 대리인 대화 로그는 데모에서는 재미있지만, 실제 제품에서는 AI가 사람의 말을 만들어 내는 것처럼 보인다.

1. 결과 화면이 길고 우선순위가 평평하다.
   결론, 이유, 양보, 공정성, 차선, 제외 후보, 개인 리포트, 최종 의견이 모두 카드로 이어진다. 사용자가 가장 먼저 알아야 할 “무엇으로 정했고, 내 절대 조건은 지켜졌는가”가 수치 사이에 묻힌다.

1. 브랜드 모티프가 아직 없다.
   보라색 강조색, 흰 카드, 큰 라운드는 완성도는 높지만 범용 SaaS 문법이다. 검은 정사각형 로고와 PRIVATE AGENT CONSENSUS 문구만으로는 끼리만의 기억점이 약하다.

1. 모바일 목업을 벗어난 제품 화면이 없다.
   참가자 입력은 480px 단일 열이 맞지만, 방장의 현황과 최종 결과는 데스크톱에서 비교·관리할 수 있는 넓은 레이아웃이 필요하다.

3. 벤치마크 6종

벤치마크가 비워 둔 자리

비교 제품은 각자 한 구간을 잘한다. 그러나 아래 다섯 단계를 하나로 연결하지는 않는다.

내 답변은 비공개
        ↓
AI가 선호 / 상한 / 금지로 구조화
        ↓
절대 안 되는 후보를 먼저 제외
        ↓
남은 후보에서 가장 불리한 사람을 보호
        ↓
이름 없는 재확인으로 사람이 끝낸다

이 연결 자체가 끼리의 디자인 자산이다.

4. 권장 디자인 콘셉트 — “봉인된 원탁”

핵심 이미지

• 각 참가자의 답변은 봉인된 카드다.
• AI 대리인은 봉인을 뜯어 공개하는 캐릭터가 아니라, 카드에서 조건만 추출하는 중개자다.
• 공동 결과는 여러 카드가 겹친 가운데 생기는 교집합 영역이다.
• 최종 재확인은 원탁 둘레의 점이 하나씩 채워지는 모습이다. 이름은 보이지 않고 참여 수만 보인다.

화면에서의 역할 색

현재 #7057ff를 종이색 #fbfaf8 위 일반 텍스트로 쓰면 대비가 4.48:1로 AA 4.5:1에 근소하게 못 미친다. #684DEB로 어둡게 조정하면 보라색 인상을 유지하면서 대비를 확보할 수 있다.

형태·타이포 원칙

• 카드 반경을 모두 20~24px로 통일하지 않는다. 입력 카드 16px, 정보 묶음 12px, 중요한 결과 카드만 24px로 계층을 만든다.
• 그림자는 부유하는 선택지보다 모달·초대 시트처럼 실제로 위에 뜬 요소에만 쓴다.
• 이모지는 시제품 표식에 한정하고, 제품 UI는 같은 굵기의 선 아이콘으로 교체한다.
• 제목은 지금처럼 굵고 짧게 유지한다. 설명은 한 문단 2줄을 넘기지 않는다.
• 시간·인원·마감 숫자는 고정폭 숫자를 사용해 상태가 바뀌어도 폭이 흔들리지 않게 한다.

5. 화면별 적용안

A. 홈

현재는 서비스 설명 뒤에 팀 워크숍 / 여행 / 회식 장르 카드가 바로 나온다. 장르 선택 전에 끼리의 작동 원리를 보여 줘야 한다.

권장 첫 화면:

[끼리]

서로의 속마음은 숨기고,
모두가 납득할 안을 찾아요.

[봉인해 답하기] → [AI가 교집합 찾기] → [함께 확인하기]

[새 결정 시작]        [초대 링크로 참여]

• Rallly처럼 첫 화면에서 “3단계”가 눈에 들어오게 한다.
• 방을 만드는 사람과 초대받은 사람의 진입을 처음부터 나눈다.
• PRIVATE AGENT CONSENSUS는 제품 언어가 아니라 설명용 분류처럼 보인다. 한국어 핵심 약속을 먼저 두고 영문은 브랜드 보조 문구로 내린다.

B. 질문

현재의 한 화면 한 질문 구조는 유지한다. 대신 답을 다음 세 의미로 통일한다.

○ 좋아요 / 선호해요
△ 필요하면 양보할 수 있어요
× 이 조건은 어려워요

시간·예산에서만 쓰는 상한 켜기 체크박스는 다음처럼 큰 의미 선택으로 바꾼다.

선택한 5만원은…
[가능하면 맞춰 주세요]  [반드시 넘지 말아 주세요]
                         후보 탈락에 사용됨

• Doodle·Rallly의 3상태 문법을 끼리의 선호 / 양보 / 거부에 맞게 변형한다.
• 거부권을 선택하면 rust 색 테두리와 “이 값을 넘는 후보는 제외돼요” 문장을 즉시 보여 준다.
• 자유서술 구조화 뒤에는 이렇게 이해했어요만 보여 주지 말고 [맞아요] [수정할게요]를 둔다.
• 진행바에는 4/7 · 약 1분 남음처럼 남은 부담을 같이 알린다.

C. 대기실

• 참가자에게는 내 답변 완료, 3/4명 제출, 마감까지 6시간만 먼저 보여 준다.
• 방장에게는 미응답자와 리마인드 버튼을 보여 주되, “누가 무엇을 답했는지 볼 수 없음”을 같은 카드에 고정한다.
• Slido처럼 참가자 모드와 방장 모드를 명확하게 분리한다. 현재 목업 시뮬레이터에만 있는 역할 구분을 실제 제품 상단 상태로 승격한다.

D. 조율 중

떠다니는 이모지와 대화 로그 대신, 검증 가능한 네 단계로 바꾼다.

✓ 답변을 선호·상한·금지 조건으로 바꿈
✓ 절대 조건과 충돌하는 후보 2개 제외
● 남은 후보 3개의 공정성 비교 중
○ 결과 이유를 익명 문장으로 정리

• 화면 중앙에는 봉인된 참가자 토큰들이 교집합으로 모이는 짧은 모션을 쓴다.
• “대리인 A가 말했다” 같은 가상 대사는 없앤다.
• 원문 비공개, 규칙 계산, 설명 생성의 경계를 한 줄씩 표시한다.
• 30초가 넘으면 로딩을 지속하지 않고 규칙 기반 결과로 전환됐다는 배너를 보여 준다.

E. 결과

결과 페이지는 다음 순서로 재배치한다.

1. 결론 카드 — 장소, 일정, 1인 예산, 이동을 한 화면에
2. 지켜진 약속 — 절대 조건 모두 충족 여부
3. 이 안이 이긴 이유 3개 — 사람 수가 아닌 조건 단위 익명 문장
4. 내 관점 — 본인만 보는 대리인 리포트 진입
5. 다른 후보 비교 — 접힌 상태
6. 최종 재확인 — 화면 하단 고정 CTA

공정성 수치는 다음처럼 번역한다.

• 현재: 최저 만족도 61.5 / 평균 만족도 74.1 / 후보 점수 공식
• 권장: 가장 아쉬운 사람도 수용 가능한 범위예요 + 작은 막대
• 원식과 소수점은 계산 기준 보기에서만 공개한다.

Airbnb처럼 후보를 구체적인 카드로 보여 주되, 사진보다 일정·비용·이동·충족 조건이 먼저 보이게 한다.

F. 내 대리인 리포트

• 보라색 개인 영역으로 공동 결과와 시각적으로 분리한다.
• 상단에 본인만 볼 수 있음과 데이터 보관·삭제 시점을 함께 표시한다.
• “내가 얻은 것 / 양보한 것 / 끝까지 지킨 것” 세 묶음으로 정리한다.
• 다른 사람을 추론할 수 있는 단서와 정확한 개인 점수는 보여 주지 않는다.

G. 최종 재확인

Loomio의 선택 의미처럼, 버튼 이름만으로 행동 결과가 이해되어야 한다.

• 세 버튼에 체크·말풍선·되돌림 아이콘을 각각 써서 스캔을 돕는다.
• 결과 집계는 이름 대신 동의 3 · 조건부 1 · 재조율 0으로 보여 준다.
• 방장에게만 확정 권한과 기권 처리 설명을 보인다.

H. 합의 불가

“실패”보다 다음 행동을 선명하게 보여 준다.

모든 절대 조건을 함께 지킬 후보가 없어요.

[내 조건 하나 다시 보기]
[그룹에 재조율 요청]

누구의 거부권 때문인지 추론되지 않도록 후보별 개인 사유 대신 충돌한 조건 범주 수만 보여 준다.

6. 추천 정보 구조

7. 구현 우선순위

P0 — 데모 설득력을 바로 바꾸는 것

• 시간·예산 상한을 작은 체크박스에서 선호 / 반드시 의미 카드로 변경
• 조율 로그를 4단계 검증 진행 화면으로 변경
• 결과 첫 화면을 결론 → 지켜진 약속 → 이유 3개로 재배치
• 최종 재확인 3개 선택의 의미와 결과를 버튼 안에 명시
• 일반 텍스트 대비가 부족한 보라색과 주황색 조정

P1 — 제품 신뢰를 만드는 것

• 홈에 3단계 개념도와 새 결정 / 초대 참여 2개 진입 추가
• 방장·참가자 모드를 실제 UI에서 분리
• 모든 입력 화면에 익명 상태와 데이터 사용 범위를 짧게 고정
• 개인 리포트에 보관·삭제 시점 표시
• 결과와 방장 현황의 데스크톱 2열 레이아웃 추가

P2 — 브랜드와 확장성

• 봉인된 원탁 모티프의 로고·아이콘·모션 개발
• 후보 카드에 장르별 이미지·지도·시간 정보 추가
• 워크숍 외 여행·회식 템플릿별 질문 시각화
• 결정 기록과 재방문 화면 설계

8. 발표에서 보여 줄 60초 디자인 장면

1. 홈에서 세 단계 개념을 3초 안에 이해시킨다.
2. 참가자가 예산 5만원을 고르고 반드시 넘지 말아 주세요를 선택한다.
3. 자유서술을 AI가 조건 태그로 바꾸고 참가자가 직접 확인한다.
4. 봉인된 참가자 토큰이 모이고, 후보 제외 → 공정성 비교 → 이유 정리 단계가 진행된다.
5. 결과 화면에서 절대 조건 4개 모두 지킴과 최종안을 먼저 보여 준다.
6. 참가자가 실행 조건이 있으면 좋아요를 누르고, 이름 없는 집계가 올라간다.

이 장면이면 끼리가 단순 다수결도, 익명 설문도, AI 채팅도 아니라 “비공개 조건을 지키는 합의 인터페이스”라는 점이 한 번에 드러난다.

9. 출처

• Doodle Group Poll: https://doodle.com/en/product/polls/ · https://help.doodle.com/en/articles/9457279-how-do-i-participate-in-a-group-poll
• Rallly: https://landing.rallly.co/ · https://support.rallly.co/introduction
• Loomio: https://www.loomio.com/features/ · https://www.loomio.com/docs/en/user_manual/polls/intro_to_decisions
• Slido: https://www.slido.com/features-live-qa · https://community.slido.com/security-privacy-essentials-224/participant-privacy-choose-anonymous-or-named-participation-1609
• Typeform: https://www.typeform.com/hello · https://help.typeform.com/hc/en-us/articles/38099463383188-How-to-add-multiple-questions-to-a-form-page
• Airbnb Shared Wishlists: https://news.airbnb.com/airbnb-2024-summer-release-highlights
• 현재 목업: OUTBOX/KKIRI/mockup/app.js, OUTBOX/KKIRI/mockup/styles.css, OUTBOX/KKIRI/mockup/shots/