키스크린과 인터랙션 프레임웍

키스크린(Key Screens)은 UI 프로젝트에서 리서치·분석의 결과가 비로소 구체적 화면 형태로 드러나는 지점이다. 이때부터 기획·개발·디자인 부서가 본격적으로 논의를 시작할 수 있어, 고객은 흔히 키스크린 등장 시점을 '본격적 프로젝트 시작'으로 인지한다. 그러나 설득 논리 없이 성급하게 키스크린을 그리면 이후 중심을 잡지 못하고 계속 흔들리게 된다.

키스크린 도출은 여섯 단계의 구조화된 접근으로 정리할 수 있다:

1. 사용자의 요구사항(from Personas) — 사용자의 Goal(경험/궁극/인생 목표)과 Needs(필요 기능 아이디어)를 도출. 화면 구성에 결정적 역할을 하는 것은 '궁극의 목표(End Goal)'이다. 2. 사업적 요구사항(Business Requirements) — 고객의 제작 목적, 기대 효과, 경쟁자, 전략적 초점. 프로젝트 방향성을 크게 좌우하며 초기 feature list가 존재할 수 있다. 3. 기술적 요구사항(Technical Requirements) — 기술 특성·수준과 일정의 제약. 기술적 한계가 오히려 구현 가능한 모습의 예측을 도와주기도 한다. 4. 인터랙션 프레임웍(Interaction Framework) — 사용자·사업·기술 세 축을 종합한 최초의 스케치. 키스크린보다 러프한 실루엣으로, '대략 이런 모습'의 뼈대·골격 역할을 한다. 특정 프레임웍을 선택하면 얻는 것과 잃는 것이 명확해지며, 고객·기술팀과의 협의·토론 대상이 된다. 5. Features(from Persona's Needs) — 필요 기능들을 퍼소나 Goal 기준의 중요도, 기술 검토, 비즈니스 관점 세 필터로 우선순위화하고 사용 시나리오와 함께 검토해 상충 관계를 파악한다. 6. Key Screens (4 + 5) — 인터랙션 프레임웍(뼈대) 위에 기능(살)을 얹어 키스크린이 완성된다. 키스크린이 탄탄하면 이후 flow는 자연스럽게 도출되고, 사용 시나리오의 연결 지점 역할을 한다.

핵심은 '인터랙션 프레임웍 단계를 건너뛰지 말 것'이다. 디테일에 치우치기 전, 세 축의 균형 속에서 가장 중요한 사용 scene을 만족시키는 화면 구조를 먼저 그려야 한다. 고객의 조급함에 밀려 곧바로 키스크린부터 그리면 설득 논리가 없어 프로젝트 내내 흔들린다.

이 프로세스의 이론적 뿌리는 같은 저자가 약 1년 앞서 쓴 글에서 찾을 수 있다. 휴 두버리(Hugh Dubberly)의 "Models of Models"(interactions, 2009)를 인용하며, model이란 이미 존재하는 세계를 관찰한 결과 귀추법(abduction)의 과정을 거쳐 얻어지는 아이디어이며, 현상의 패턴으로부터 도출되어 이후 행동을 가이드·제한하고 그 결과를 낳는다고 설명한다. 예측과 실제 결과가 일치하면 '검증된 model'이 되고, 어긋나면 model을 수정하는 과정이 반복된다(천동설에서 지동설로의 전환과 같은 구조). 두버리는 디자이너가 이런 model을 매개로 따로 놀던 아티팩트와 행동을 통합할 수 있다고 보았다 — interaction model은 인터페이스 위젯을, service model은 고객 접점을, brand model은 메시지를, platform model은 제품을 각각 통합한다.

이로부터 도출한 초기 프로세스 스케치는 관찰(Observation, 인터뷰·컨텍스추얼 인쿼리) → 멘탈 모델링(Mental Modeling, User's/System's/Stakeholder's model과 이를 아우르는 'Model of Models' 스케치) → 인터랙션 모델링(Interaction Modeling, =Interaction Framework Sketch — 추상적 스케치를 구체적 스케치로 번역하고 멘탈 모델·로파이 프로토타이핑 기준으로 검증) → 상세 디자인(Detailed Designing) 4단계다. 이 초안에서는 퍼소나 모델링이 별도 단계로 명시되지 않지만, 멘탈 모델을 기술하는 과정에 메인 퍼소나의 행동 패턴이 내재되어 있다고 보았다 — 디자인을 위한 콘텐츠는 유지하되 커뮤니케이션 도구로서의 퍼소나 문서화만 생략함으로써, 조사 직후부터 인터랙션 프레임웍 스케치까지 더 빠르게 도달하려는 시도였다. 이후 실무에 적용되며 이 스케치는 위에 정리된 '퍼소나 → 요구사항 → 인터랙션 프레임웍 → 키스크린'의 6단계 프로세스로 구체화되었다.

핵심 내용

  • 키스크린: UI 프로젝트에서 리서치 결과가 구체적 화면으로 표현되는 전환점
  • 6단계 프로세스: 사용자 요구 → 사업 요구 → 기술 요구 → 인터랙션 프레임웍 → Features → Key Screens
  • 사용자 Goal 중 궁극의 목표(End Goal)가 화면 구성을 좌우
  • 인터랙션 프레임웍은 키스크린의 뼈대: 디테일 전에 구조부터 잡는 단계
  • 기술 제약은 한계이자 구현 가능 범위를 예측할 수 있게 하는 도구
  • 성급한 키스크린은 설득 논리 부재로 프로젝트 내내 흔들림
  • 이론적 뿌리: 휴 두버리의 "Models of Models" — model은 관찰·귀추법으로 얻어지고 검증·수정을 반복하며 완성됨
  • 초기 프로세스 스케치: 관찰 → 멘탈 모델링 → 인터랙션 모델링(=Interaction Framework Sketch) → 상세 디자인
  • 퍼소나는 문서화 단계는 생략되어도 멘탈 모델 기술 과정에 행동 패턴으로 내재됨

관련 개념

출처

최종 업데이트: 2026-08-15 | 출처 2개