Communitygithub.com

와이어프레임 피드백 & 크리틱

와이어프레임에 대한 피드백 요청이나 제공, 디자인 크리틱 진행 또는 이해관계자 검토 준비 시 사용합니다. 또한 '더 돋보이게 해줘', '마음에 안 들어'처럼 모호한 피드백이 들어오거나, '그냥 설정으로 옮겨'처럼 해결책 대신 답변 형태로 피드백이 올 때, 검토 후 어떤 피드백을 반영할지 결정할 때, 또는 검토 세션이 산으로 갔을 때(큰 목소리가 지배하거나, 방어적으로 나오거나, 같은 논쟁이 반복되며 결정이 안 날 때)에도 트리거됩니다.

와이어프레임 피드백 & 크리틱란 무엇인가요?

이 스킬은 디자이너와 개발팀이 와이어프레임 단계에서 구조화된 디자인 크리틱을 진행하고, 피드백을 효과적으로 요청·제공·처리하는 방법을 제공합니다. Adam Connor와 Aaron Irizarry의 『Discussing Design』에서 제시한 5가지 특성(신뢰 기반, 분석적, 구체적, 개방형, 객관적)을 바탕으로, '문제가 아닌 해결책' 형태의 피드백을 본질적인 문제로 전환하고, '30/90 규칙'을 통해 적절한 시점에 올바른 피드백을 요청할 수 있도록 돕습니다. 또한 Donna Spencer의 5단계 분류 체계로 피드백을 선별하고 후속 조치를 결정하며, 비동기 크리틱, 라운드 로빈 진행, 정리 단계 폐쇄 루프 등 구체적인 회의 진행 기법을 포함합니다. 이 스킬은 사용성 테스트나 승인 미팅이 아닌, 디자인 개선을 위한 팀 분석 및 전문가 검토에 초점을 맞춥니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/heyviet/wireframe-skills/tree/HEAD/skills/wireframe-feedback

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

와이어프레임 피드백 & 크리틱은(는) 무엇을 하나요?

개요

창작과 분석은 서로 다른 프로세스입니다. 절대로 동시에 하지 마세요(코리타 켄트의 규칙 8). 크리틱은 구조화된 분석입니다. 정의된 기준에 따라 디자인을 평가하고, 다음 창의적 단계로 나아가는 데 충분한 실행 가능한 정보를 수집한 후 멈춥니다. 목표는 사용자를 위한 더 나은 디자인이지, 합의나 승인, 현재 버전에 대한 방어가 아닙니다. 당신은 당신의 디자인이 아닙니다.

사용 시기

  • 와이어프레임의 모든 단계(초기 콘셉트부터 최종 세부 사항까지)에서 피드백 요청 시
  • 팀 크리틱, 이해관계자 검토 또는 비동기 코멘트 라운드 진행 시
  • 모호하거나 해결책 형태의 피드백을 활용 가능한 문제로 전환할 때
  • 검토 후 쌓인 수많은 코멘트를 계획으로 분류할 때
  • 사용 금지: 사용성 테스트 — 크리틱은 전문가/팀 분석입니다. 사용자 증거는 실제 사용자가 실제 작업을 수행하는 것을 필요로 합니다.
  • 사용 금지: 승인 미팅 — 크리틱은 디자인을 개선합니다. 승인은 별도의 결정 포럼이며 이해관계가 다릅니다.

피드백 요청하기

요청 구성하기 — 목표, 단계, 질문

  • 절대 "어떤 생각 있어요?"라고 묻지 마세요. 개방형 질문은 반응적인 취향 코멘트를 유발합니다. 세 가지를 명시하세요: 화면이 제공하는 사용자 목표, 작업 완료 정도, 그리고 구체적인 질문. "이것은 게스트 사용자를 위한 체크아웃 플로우입니다, 약 30% 완료되었습니다. 단계 순서가 올바른지, 결제 전에 누락된 것이 있는지 검토해 주세요."
  • 30/90 규칙 (Jason Freedman, 42Floors): "30% 피드백"을 초기에 요청하십시오 — 검토자는 세부 사항이 미완성임을 인지하고 구조와 방향에 집중합니다. "90% 피드백"은 완료에 가까워졌을 때 요청하십시오 — 큰 변경 없이 세부 사항을 잡아냅니다. 디자인당 최소 두 개의 체크포인트.
  • 충실도는 피드백 수준을 암시합니다. 저충실도 스케치는 구조적 의견을 유도하고, 정교한 와이어프레임은 픽셀 단위의 지적을 유도합니다. 방향성 피드백을 원할 때 고충실도로 제시하면 잘못된 레이어에 대한 코멘트가 보장됩니다.
  • 검토 범위 밖의 내용을 명시하세요. "비주얼 스타일은 임시입니다. 폰트와 간격은 무시해 주세요."라고 말하면 불필요한 코멘트 클래스를 모두 방지할 수 있습니다.
  • 혼자서 아이디어를 최대한 발전시킨 후에 요청하세요. 그 멈춤이 신호입니다. 초기 요청이 가장 어렵고(미완성 작업을 보여주는 두려움) 가장 가치 있습니다 — 90%가 아닌 30%에 선례를 만드세요.

검토자를 질문에 맞추기

  • 팀원 (PM, 개발, 리서치, 디자인) — 플로우 로직, 실현 가능성, 일관성. 그들은 사용자와 제품을 대변하며, 메모 작성자를 겸할 수 있습니다.
  • 주제 전문가 — 도메인 정확성 (트레이딩 앱의 주문 플로우 전문가). 초기에 초대하세요. 그들은 요청을 거의 받지 않으며 일반적으로 환영합니다.
  • 이해관계자 — 목표 정렬과 제약 조건. 적극적으로 참여하는 사람은 초기에, 고위 관계자는 인지 차원에서 나중에 초대하세요.
  • 누군가의 의견을 원하지 않는다면 초대하지 마세요. 모든 초대자는 참여할 것으로 예상됩니다. 구경꾼은 회의를 흐리게 하고 코멘트 더미를 부풀립니다.

건설적인 피드백 제공하기

아래 다섯 가지 특성은 Adam Connor와 Aaron Irizarry의 『Discussing Design』에서 가져왔으며, 원본 출처에 의해 각색되었습니다. 건설적인 피드백은 신뢰 기반(공유 목표: 제품 개선), 분석적(디자인을 부분으로 나누고 작업에 미치는 영향을 추적), 구체적(요소와 실패를 명명), 개방형(문제를 제시하고 해결책은 디자이너에게 맡김), 객관적(사용자 목표에서 논쟁, 개인 취향 아님), 실행 가능(다음 반복에서 사용 가능)입니다. 잡아야 할 두 가지 비생산적인 모드: 반응형("이거 싫어요" — 순수 감정, 분석 없음)과 지시형("그냥 설정에 넣어요" — 명시된 문제 없는 해결책).

문제, 해결책이 아닌

관찰로 시작하고, 사용자 목표에 연결하며, 수정은 열어두세요. 제안해야 한다면 먼저 이유를 제시하세요. 근본 문제가 없는 제안은 평가하거나 개선할 수 없습니다.

표현 재구성하기

나쁨 (반응형/모호함/지시형)좋음 (분석적, 사용자와 연결)
"내비게이션이 혼란스러워요""내비게이션이 개인정보 설정으로 가는 경로를 숨깁니다. 연구에 따르면 사용자가 여기에 오는 이유입니다."
"이 버튼이 마음에 안 들어요""'취소'가 편집 취소 대신 구독 취소로 읽힐 수 있습니다."
"CTA를 더 돋보이게 해주세요""CTA가 시각적으로 눈에 띄지 않습니다. 이 화면의 주요 작업이라면 사용자가 놓칠 것입니다."
"이것을 설정 페이지로 옮기세요""이 블록이 체크아웃 작업을 방해합니다. 인라인 대신 설정에 배치하게 된 이유는 무엇인가요?"
"이 양식은 국제적으로 작동하지 않을 겁니다""미국 외 사용자는 이 주소 필드를 매핑할 수 없습니다. 국가별로 라벨을 현지화하는 것을 고려하세요."
"정말 좋아요!""단일 열 레이아웃이 작업을 선형으로 유지합니다. 이 특성을 체크아웃의 나머지 부분에도 유지하세요."

긍정적 피드백은 구체적일 때만 가치가 있습니다. 무엇이 효과가 있고 왜 그런지 이름을 붙이세요. 그래야 반복 과정에서 실수로 사라지는 것을 방지합니다.

판단보다 질문

디자이너의 추론을 표면화하는 질문으로 시작하세요: 왜 여기서 이 패턴을 사용했나요? 이 시나리오에서 사용자의 의도와 어떻게 일치하나요? 올바른 문제를 해결하나요? 실현 불가능한 것은 무엇인가요? 다른 어떤 방향이 고려되었나요? 누락된 것은 없나요? — 그런 다음 평가하세요.

피드백 받기

  • 경청: 들은 내용을 다시 반영하세요("그러면 우려되는 점은 배치가 아니라 라벨인가요?") 제공자가 확인할 때까지. 방어를 연습하는 대신 계속 경청하게 하고, 모호한 코멘트를 정확하게 만듭니다.
  • 비생산적인 피드백을 파헤치고, 무시하지 마세요. 반응형 및 지시형 코멘트에는 일반적으로 실제 문제가 포함되어 있습니다. "그게 무슨 뜻인가요?"와 "이것이 사용자의 작업에 어떤 영향을 미치나요?"와 같은 질문이 이를 전환합니다.
  • 기록하고, 반박하지 마세요. 각 코멘트를 실시간으로 방어하면 세션이 소모됩니다. 명확히 하고, 기록하고, 나중에 결정하세요.

크리틱 진행하기

구조 (플로우 규모 검토에 45분)

  1. 프레임 — 5분. 목표, 단계(30% 또는 90%), 구체적인 질문, 기본 규칙(문제 vs 해결책, 워크스루 중 또는 후에 코멘트 — 명시).
  2. 워크스루 — 10분. 먼저 기능과 플로우 개요, 그다음 화면별로, 사용자 용어로 설명: "사용자가 여기에 도착하면 Y를 선택하여 X를 할 수 있습니다." 12개 중 첫 화면을 준비 없이 열지 마세요.
  3. 토론 — 25분. 프레임된 질문에 대한 촉진된 분석.
  4. 마무리 — 5분. 참가자에게 감사, 다음 단계 설명, 요약 약속.

역할

  • 진행자 (보통 발표자): 발표자, 중재자, 시간 관리자를 겸합니다. 대화를 안내합니다 — 프레임 설정, 분석 유지, 막혔을 때 진행, 실행 가능한 세부 사항 수집. 안내하고, 절대 변호하지 않습니다.
  • 메모 작성자 — 전담, 진행자 절대 안 됨. 진행과 상세 기록은 양립할 수 없습니다. 항목별: 어떤 와이어프레임, 화면의 어떤 영역, 코멘트, 누가 말했는지. 스티커 메모 또는 와이어프레이밍 도구의 라이브 코멘트, 방에서 볼 수 있어야 함. 코멘터를 이름으로 태그하여 기록을 확인할 수 있도록 합니다.
  • 참가자: 적극적인 기여자, 각자는 초대된 이유를 알고 있습니다.

진행 기법

  • 라운드 로빈으로 시작: 각자 차례대로 — 가장 큰 목소리가 프레임을 설정하는 것을 방지합니다.
  • 조용한 멤버를 적극적으로 참여시키세요. 느리게 처리하거나 그룹에서 말하지 않을 사람을 위해 이후 비동기 채널을 제공하세요. 시간이 더 들지만 완전한 커버리지를 보장합니다.
  • 의견 불일치를 위한 합법적인 통로를 유지하세요 (David Dylan Thomas) — 세션 내에서 불일치가 표현될 합법적인 출구가 없으면, 나중에 거부권으로 다시 표면화됩니다.
  • "내가 하면…"을 사용자에게 돌리세요. 개인 취향 코멘트는 "우리가 아는 바에 따르면 사용자는 여기서 무엇을 할까요?"로 대응하세요.
  • 원하는 피드백을 모델링하고, 토론이 취향이나 해결책으로 흐를 때 명시적으로 재설정하세요.
  • 디자인이 크리틱에서 실패하는 것은 크리틱의 성공입니다. 분석 결과 디자인이 목표를 충족하지 못하면, 한 번의 반복을 절약한 것입니다. 그렇게 말하고 넘어가세요.
  • 비동기 크리틱도 효과적입니다: 검토자가 자신의 시간에 와이어프레임 영역에 고정된 콜아웃에 코멘트를 답니다. 진행자가 통합하고, 태그를 달고, 불명확한 항목을 추적합니다. 동일한 규칙 — 프레임된 요청, 구체적인 질문, 명명된 코멘트.

피드백 처리하기

모든 항목 분류하기

모든 피드백을 하나의 공유 시트에 로깅하세요 — 항목, 화면, 누가 말했는지, 상태. Donna Spencer의 다섯 가지 상태 (Presenting Design Work):

상태의미다음 조치
동의 — 지금수락됨, 간단함다음 패스에 포함
동의 — 나중에수락됨, 이번 반복 아님대상 단계와 함께 백로그로
연구 필요현재 정보로 결정 불가질문과 방법 명명
명확화코멘트 이해 불가 (비동기에서 흔함)코멘터에게 확인
아니오구현 안 함목표 또는 문제 설명과 연결된 이유 기록
  • 거절은 정당한 결과입니다. — 단, 기록된 이유가 있어야 합니다. 조용히 드롭하면 프로세스가 작동하는 신뢰가 무너집니다.
  • 새로운 방향을 채택하기 전에 문제 설명으로 돌아가세요. 그것이 사용자의 목표를 위한 것인가요, 아니면 마지막으로 말한 사람의 변덕인가요? 위원회별 디자인은 성공하는 경우가 드뭅니다.
  • 잘못된 가정에 대한 피드백은 패치가 아닌 연구를 트리거합니다. 크리틱에서 누락된 사례가 드러난 경우(가입 플로우가 "확인 이메일이 도착하지 않음"을 처리하지 못한 경우), 리드로잉 전에 옵션을 검토하세요 — 아마도 기술 검토가 필요할 수 있습니다.

루프 닫기

  • 참가자와 요약 공유: 검토된 내용, 참석자, 각 항목의 상태. 리드로우 전에 응답, 명확화, 추가할 시간을 사람들에게 주세요.
  • 다음 라운드에서는 변경을 주도한 피드백과 함께 기존 버전과 새 버전을 나란히 보여주세요. 검토자는 무엇이 이동했고 왜 그런지 즉시 알 수 있습니다.
  • 피드백은 순환입니다: 통합 → 리드로우 → 다시 크리틱. 와이어프레임 중 정기적인 크리틱은 전체 디자인 프로세스에서 가장 저렴한 위험 감소 수단입니다.

필수 컨텍스트

  • 원하는 응답 유형 — 탐색, 콘셉트 간 선택, 또는 하나의 디자인 분석.
  • 충실도와 그것이 정착 정도에 대해 암시하는 바.
  • 검토자가 무언가에 대해 판단하는 데 필요한 목표와 제약 조건.
  • 누가 방에 있고 왜 각자가 있는지. 모두 초대하면 소음이 발생합니다.
  • 이미 결정되어 논쟁 대상이 아닌 것. 말하지 않으면 재론됩니다.

평가 절차

  1. 요청 프레임: 어떤 단계, 어떤 결정, 특히 검토받고 싶은 것.
  2. 아티팩트 이전에 검토자에게 목표와 제약 조건을 제공하세요.
  3. 분석에 대한 크리틱 진행, 선호도가 아님 — 해결책을 문제로 다시 리디렉션하세요.
  4. 각 피드백을 다섯 가지 특성에 대해 테스트하세요: 신뢰 기반, 분석적, 명확하고 구체적, 개방형, 객관적.
  5. 모호한 반응을 사용자 작업과 연결된 관찰로 변환한 후 조치하세요.
  6. 조치할 것, 연기할 것, 거절할 것을 결정하세요 — 거절에는 기록된 이유가 있어야 합니다.
  7. 루프 닫기: 검토자에게 무엇이 변경되었고 변경되지 않았는지 알리세요.

출력 형식

요청 유형: <탐색 | 선택 | 분석> (<특정 영역>)
제공된 컨텍스트: 목표 <…> 제약 조건 <…> 이미 결정됨 <…>
수신 피드백 → 관찰로 재진술:
  "<원본>" → "<분석적, 사용자 작업과 연결>"
조치: <목록>  ·  연기: <목록>  ·  거절: <항목 — 이유>
루프 종료 대상: <누가 무엇이 변경되었는지 전달받았는지>

빠른 참조

상황패턴
초기 콘셉트, 방향 불명확30% 요청 — 구조만, 저충실도 아티팩트, 세부 사항 미완성 명시
최종 단계 와이어프레임90% 요청 — 세부 사항 수정, 큰 변경 없음
모호한 피드백 ("더 돋보이게")명확화 질문: "현재 버전이 사용자에게 어떤 문제를 일으키나요?"
해결책 형태의 피드백해결책 평가 전에 근본 문제 요청
검토자가 "내가 하면…"사용자에게 리디렉션: "우리 연구에 따르면 사용자는 무엇을 할까요?"
큰 목소리가 지배라운드 로빈; 조용한 멤버를 이름으로 참여 유도
검토자가 그룹에서 말하지 않음진행자가 통합한 비동기 후속 채널
분산/시차 팀고정된 콜아웃 코멘트를 통한 비동기 크리틱, 이름 명시 및 후속 조치
복잡한 다중 화면 플로우 제시먼저 플로우 개요, 그다음 화면, 사용자 용어로 설명
검토 후 피드백 더미5단계 분류: 지금 / 나중 / 연구 / 명확화 / 이유와 함께 거절
이해관계자 취향 vs 사용자 목표문제 설명에 대해 서면으로 중재
세션 종료감사 + 다음 단계 + 항목별 상태 요약
다음 검토 라운드변경을 주도한 피드백과 함께 이전 vs 새 버전 나란히

안티 패턴

실수수정
"어떤 생각 있어요?" 질문목표, 단계, 하나 또는 두 개의 구체적인 질문 명시
방향 질문에 고충실도 와이어프레임원하는 피드백 수준에 충실도 일치
첫 번째 검토를 90%까지 기다림30% 체크포인트 — 변경 비용이 비싸지기 전에 초기 피드백
진행자가 메모 작성전담 메모 작성자; 와이어프레임 + 영역 + 코멘트 + 작성자 기록
각 코멘트를 실시간 방어명확화, 기록, 분류에서 결정
회의에서 리디자인크리틱 분석; 창작은 숙고 후 별도 패스
"가시성을 위해" 모두 초대이 단계를 발전시키는 의견을 가진 사람만 초대
반응형/지시형 코멘트 무시파헤치기: "무슨 뜻인가요?" / "이것이 사용자의 작업에 어떤 영향을 미치나요?"
모든 코멘트 통합문제 설명에 대해 분류; 위원회별 디자인은 실패
피드백을 조용히 드롭모든 항목에 상태 부여; "아니오"에는 기록된 이유
비판적 코멘트만무엇이 효과가 있고 왜 그런지 이름을 붙여 반복에서 살아남도록 함
크리틱을 승인 게이트로 취급별도 포럼: 크리틱 개선, 승인 결정

함께 사용되는 스킬

상황함께 실행
크리틱 관련 와이어프레임 제시, 버전 관리 또는 공유wireframe-collaboration
취향 대신 명명된 휴리스틱에 크리틱 코멘트 근거dec-nielsen-heuristics, usability-heuristics
개인적으로 받아들이지 않고 마무리할 수 있도록 어려운 크리틱 전달si-corrective-feedback
피드백을 "아니오"로 표시하기 전에 먼저 가장 강력한 버전을 진술blind-steelman

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

관련 스킬