OOUX를 해야 한다는 너무 수동적인 것 같음 내가 OOUX에게로 간다 - (2)

OOUX 2편

 

오늘은 저번 포스팅에서 나온 OOUX를 어떻게 실무에서 적용해야 할지, 직접 제작한 와이어프레임으로 함께 배워 보도록 하겠습니다. 원래 텍스트로 보는 것보다, 사진으로 몇 장 보는 게 더 이해가 빠르잖아요...

 

오늘은 CGV 같은 영화 애플리케이션을 기반으로, 객체를 추출하는 과정을 먼저 배워 보고, 와이어프레임에 담긴 화면을 보도록 하겠습니다

 

내가 봐도 설명이 너무 어려웠음 -.-;;

 

---

객체 모델링에서 와이어프레임까지: 영화 커머스 앱 설계

일단, 영화 앱을 설계하기 전에 필요한 페이지를 정의해 줄 거예요 그런 다음에 그 페이지에 맞는 객체들을 작성해 줄 겁니다

오늘 만들 페이지는 메인, 마이 페이지 정도로 두 가지의 페이지를 설계해 보겠습니다

ooux를 적용한 와이어프레임

 

Step 1. 객체 추출 및 관계 정의 (The Blueprints)

화면을 그리기 전, 우리 서비스에 돌아다닐 '물건'들을 정의하고 서로 끈을 연결합니다. 이렇게 연결된 객체들의 관계는 서로 둥둥 떠다니면서 최대한 No scrolling으로 유저에게 나타납니다

• 메인화면 핵심 객체(Objects): [영화], [상영관], [이벤트]
• 관계 설계 (Relationships)
  • 하나의 [영화]는 여러 개의 [상영관]에서 상영된다. / 또는 하나의 [영화]가 제일 가까운 [상영관]에서 상영된다.
  • 하나의 [영화]는 관련된 여러 개의 [이벤트]를 가진다.
  • 하나의 [리뷰]는 하나의 [영화]에 귀속된다.

• 마이페이지 핵심 객체(Objects): [프로필], [관람 영화], [관람 상태]
• 관계 설계 (Relationships)
  • [관람 영화]는 하나의 [관람 상태]를 가진다.
  • 하나의 [프로필]은 하나의 유저 정보를 가진다.

🚩 이때 기획자는 객체 맵을 작성합니다. 단순히 이름만 적는 게 아니라, 그 객체가 가질 속성(Attributes)을 나열하세요.

• [영화] 객체의 속성: 제목, 포스터, 평점, 3D 예고편 데이터(2026 트렌드), 장르. 등등....

💡 이 단어 뭐예요?

• 객체 추출 (Object Extraction): 서비스의 핵심 명사를 찾아 독립된 데이터 단위로 정의하는 과정.
• 관계성 (Cardinality): 객체 간의 수량적 연결 관계 (1:1, 1:N 등).

---

Step 2. 객체 그룹화 및 와이어프레임 배치 (The Modules)

이제 추출한 객체들을 화면이라는 캔버스에 배치할 차례입니다. 여기서 핵심은 콘텐츠의 우선순위에 따른 그룹화입니다.

그렇다면 위에 나온 와이어프레임에서는 객체가 어떻게 배치되어 있고, 어떻게 그룹화되어 있을까요?

객체의 그룹화 와이어프레임

 

이렇게 와이어프레임마다 객체끼리 섞어져서 저는 가장 무난하고 기본적인 와이어프레임으로 잡았는데, 다른 식으로 그룹화하여 조립할 수 있겠죠? 예를 들면,

 

• 가장 가까운 [영화관] 노출 -> 유저가 가장 최근에 예매했던 영화관
• [유저]의 취향 노출 -> [유저]와 취향이 비슷한 [유저2]의 영화

 

이렇게 차별점을 두면서 조립하듯 노출할 수 있는 것이 OOUX의 장점이자 까탈스러운 부분입니다

 

1) 메인 화면: 객체의 '요약본(Call-outs)' 그룹화

메인 화면은 여러 객체의 요약본들이 모이는 곳입니다.

• 그룹 A (상영 영화/추천): [영화] 객체의 [포스터] + [제목] + [예매하기 CTA]만 추출하여 가로 스크롤형 벤토 그리드로 그룹화
• 그룹 B (이벤트): [이벤트] 객체의 [참여하기 CTA] + [상세 설명] + [대표 이미지]을 묶어 하단에 배치합니다.

🚩 이때, CTA를 가져올 수 있는 정보는 버튼으로 디자인해 주세요

 

2) 상세 페이지: 객체의 '풀버전'과 '연결된 객체' 그룹화

유저가 특정 영화를 클릭했을 때의 와이어프레임 설계입니다.

• 상단 (Core Object): [영화] 객체의 모든 속성 노출 (줄거리, 제작진 등)
• 중단 (Related Object 1): [유저 프로필]과 연결된 [상영관] 객체들을 거리순으로 그룹화.
• 하단 (Related Object 2): 이 영화의 IP를 활용한 [이벤트] 객체들을 추천 리스트로 그룹화.

🚩 2026년형 와이어프레임은 조건부 그룹화를 사용합니다.

• 행동적 측면: 유저가 이미 티켓을 예매했다면? AI가 판단하여 [상영관] 그룹을 숨기고, 대신 [이벤트]나 [프로모션 쿠폰] 등의 객체 그룹을 상단으로 올리는 Generative UI 로직을 와이어프레임 옆에 메모하세요.

💡 이 단어 뭐예요?

• 모듈형 와이어프레임 (Modular Wireframe): 객체 단위로 UI를 덩어리 지어, 상황에 따라 재배치 가능하도록 설계한 도면.
• 조건부 로직 (Conditional Logic): 유저의 상태(예: 예매 완료 여부)에 따라 특정 객체 그룹의 노출 순서를 바꾸는 규칙.

---

앞으로 기획자의 와이어프레임은 '조립형'이 되어야 합니다

영화 커머스 앱에서 유저가 영화를 탐색하다가 자연스럽게 관련된 이벤트를 탐색하고,리뷰를 남기게 되는 흐름은 우연이 아닙니다. 기획자가 [영화] - [상영관] - [이벤트]라는 객체 사이의 다리를 튼튼하게 설계했기 때문에 가능한 일입니다.

 

이렇듯, AI가 도입된 시점부터 CTA를 살리려면 유저의 행동을 정확하게 예측하고, 그 예측에 기반한 화면을 레고 조립하듯, 이미 완성된 조립을 시각적으로 보여 주는 것이 중요합니다

 

이제 와이어프레임을 그릴 때 버튼 위치, 클릭 후 등의 경우의 수를 생각하고 그에 해당하는 프레임을 짜느라 고생하지 마세요. 세로운 조립형 와이어프레임의 고생길이 당신을 기다립니다...

 

여기에 어떤 객체 그룹을 가져다 놓아야 유저의 다음 행동(CTA)이 일어날까?를 고민하세요. 이것이 픽셀에 생명력을 불어넣는 OOUX 설계의 시작이자 핵심입니다

 

---

 

이전에 발행된 OOUX는 생각보다 어려운 점이 많겠지만 (단어의 생소함), 오직 유저만 생각한다면~ 정말정말 쉬운 새로운 UX의 활용 중 하나랍니다!

 

도움이 되셨다면... ^^ 좋아요와 구독 부탁드립니다