기획팀 채팅방에 "PO님이 우선순위 정하면 와이어프레임부터 뽑을게요" 같은 메시지가 올라옵니다. 그런데 PM과 PO는 다른 사람일까요? 와이어프레임과 프로토타입은 결국 같은 말 아닐까요?
기획 회의 용어는 기획자만 쓰는 게 아니라 디자이너·개발자·마케터가 다 함께 씁니다. 그런데 비슷하게 생긴 말이 많아 은근히 헷갈리죠. 뜻을 대충 알고 넘어가면, 정작 중요한 대화에서 딴 그림을 그리게 됩니다.
그래서 오늘은 PM·PO·IA 세 가지 직함과 스토리보드·와이어프레임·프로토타입 세 가지 산출물까지, 기획 현장에서 매일 오가는 여섯 가지를 초등학생도 알아들을 만큼 쉬운 비유로 풀어보겠습니다.
1. PM (Product Manager)
PM은 제품을 언제·어떻게 만들지 조율하고 결과까지 책임지는 사람이에요. 오케스트라의 지휘자를 떠올리면 쉽습니다.
PM은 사실 두 가지 뜻으로 쓰입니다. 프로덕트 매니저(Product Manager)는 '무엇을, 왜 만들지'를 고민하며 제품의 방향을 잡고, 프로젝트 매니저(Project Manager)는 '언제까지, 누가' 만들지 일정과 자원을 챙기죠. 우리나라 회사에서는 이 둘을 뭉뚱그려 그냥 PM이라 부르는 경우가 많아요. 어느 쪽이든 공통점은 하나입니다. 기획·디자인·개발이 따로 놀지 않도록 한가운데서 조율하는 사람이라는 것.
이럴 때 써요: "그건 PM한테 물어보세요" → 제품 방향이나 일정 관련 결정을 맡은 사람을 찾으라는 뜻입니다.
2. PO (Product Owner)
PO는 '무엇을 먼저 만들지' 순서를 정하는 최종 결정권자예요. 식당으로 치면 오늘 내놓을 메뉴를 정하는 주방장이죠.
PO(Product Owner, '제품 책임자')는 앞서 살펴본 스크럼에서 나온 역할입니다. 만들어야 할 일이 산더미처럼 쌓인 목록(제품 백로그)에서 "이번엔 이것부터"라며 우선순위를 정하죠. 그러면 개발팀은 그 순서대로 일을 하나씩 가져갑니다. PM과는 뭐가 다를까요? 크게 보면 비슷하지만, PO는 특히 '무엇을 먼저 만들지'를 정하고 개발팀과 바짝 붙어 소통하는 데 초점이 있어요. 회사에 따라 PM이 PO 역할을 함께 맡기도 합니다.
이럴 때 써요: "그 기능은 PO가 다음 순위로 미뤘어요" → 우선순위 결정권자가 처리 순서를 뒤로 조정했다는 뜻입니다.
3. IA (Information Architecture)
IA는 정보와 메뉴를 어떻게 나누고 배치할지 짜는 설계예요. 도서관이 책을 주제별로 꽂아두는 분류표와 비슷합니다.
IA(Information Architecture, '정보 구조')는 화면을 예쁘게 꾸미기 전에 '무엇을 어디에 둘지'부터 정하는 일입니다. 메뉴를 몇 개로 나눌지, 어떤 정보를 위에 두고 어떤 걸 아래에 숨길지 같은 뼈대를 잡죠. 만약 IA가 엉키면 어떻게 될까요? 아무리 디자인이 예뻐도 사용자는 원하는 걸 못 찾고 헤매게 됩니다. 그래서 IA는 눈에 잘 띄지 않지만 사용성의 밑바탕이 되는 아주 중요한 설계예요.
이럴 때 써요: 메뉴가 복잡해 길을 잃기 쉬운 서비스를 개편할 때, 디자인보다 IA부터 다시 짭니다.
4. 스토리보드 (Storyboard)
스토리보드는 화면이 어떤 순서로 넘어가는지 장면별로 그림과 설명을 붙여 엮은 문서예요. 영화 촬영 전에 그리는 '콘티'에서 온 말입니다.
스토리보드(Storyboard)는 '이 버튼을 누르면 이 화면으로 간다'처럼 사용자의 여정을 장면 순서대로 보여줍니다. 각 화면에 어떤 요소가 있고 무엇을 누르면 어디로 가는지, 설명이 함께 달리죠. 덕분에 기획자·디자이너·개발자가 같은 그림을 보며 "아, 이렇게 흘러가는구나" 하고 합을 맞출 수 있습니다. 말로만 설명하면 저마다 다른 장면을 상상하기 쉬우니까요. 스토리보드는 그 상상을 하나로 모아주는 지도인 셈입니다.
이럴 때 써요: 새 기능의 화면 흐름을 팀에 처음 공유할 때 스토리보드로 정리해 보여줍니다.
5. 와이어프레임 (Wireframe)
와이어프레임은 색과 디자인을 뺀 채 화면의 뼈대만 그린 설계도예요. 건물을 짓기 전에 그리는 골조 도면과 같죠.
와이어프레임(Wireframe, '철사 뼈대')은 '여기에 제목, 여기에 버튼, 여기에 이미지' 하는 식으로 요소의 위치와 크기만 회색 상자로 배치한 밑그림입니다. 일부러 색도 폰트도 넣지 않아요. 왜 그럴까요? 예쁜 색부터 눈에 들어오면 정작 중요한 '구조와 배치'를 두고 이야기하기가 어렵거든요. 뼈대를 먼저 합의한 다음에 살을 붙이자는 겁니다. 그래서 와이어프레임은 빠르고 단순할수록 좋습니다.
이럴 때 써요: 화면 구성을 여러 안으로 빠르게 그려 서로 비교할 때 와이어프레임을 씁니다.
6. 프로토타입 (Prototype)
프로토타입은 실제 제품처럼 눌러보고 넘겨볼 수 있는 출시 전 시제품이에요. 자동차 회사가 판매 전에 만드는 시험용 모델과 같습니다.
프로토타입(Prototype, '시제품')은 와이어프레임에서 한 걸음 더 나아갑니다. 버튼을 누르면 실제로 다음 화면으로 넘어가고, 색과 디자인도 최종본에 가깝게 입혀요. 손으로 만지듯 실제 사용 느낌을 미리 확인하는 게 목적이죠. 그래서 출시 전에 "이 흐름이 정말 편한가?"를 사용자에게 직접 테스트해 볼 때 큰 힘을 발휘합니다. 요즘은 코드 한 줄 없이도 진짜처럼 동작하는 프로토타입을 만들 수 있고요.
이럴 때 써요: 개발에 들어가기 전 사용성을 검증하고 싶을 때 프로토타입으로 미리 테스트합니다.
자주 묻는 질문
PM과 PO는 어떻게 다른가요?
회사마다 경계가 달라 헷갈리기 쉬운 부분입니다. 크게 보면 PM은 제품의 방향과 일정 전반을 폭넓게 책임지고, PO는 그중에서도 '무엇을 먼저 만들지' 우선순위를 정하며 개발팀과 밀착해 일하는 역할에 가까워요. 규모가 작은 회사에서는 한 사람이 PM과 PO를 함께 맡는 경우도 아주 흔합니다.
와이어프레임과 프로토타입은 뭐가 다른가요?
가장 큰 차이는 '움직이느냐'입니다. 와이어프레임은 색 없는 정지된 밑그림으로 화면 구조를 확인하는 용도이고, 프로토타입은 실제처럼 눌러 넘겨볼 수 있어 사용 흐름과 편의성을 테스트하는 용도예요. 보통 와이어프레임으로 뼈대를 먼저 잡은 뒤, 그것을 프로토타입으로 발전시킵니다.
스토리보드와 와이어프레임은 같은 건가요?
다릅니다. 스토리보드는 화면들이 '어떤 순서로 이어지는지' 전체 흐름을 보여주는 데 초점이 있고, 와이어프레임은 '한 화면 안에 무엇을 어디에 둘지' 배치를 보여주는 데 초점이 있어요. 흐름을 그린 지도가 스토리보드, 개별 화면의 밑그림이 와이어프레임이라고 생각하면 쉽습니다.
오늘은 PM·PO·IA 같은 기획 직함과 스토리보드·와이어프레임·프로토타입 같은 산출물까지, 기획 회의에서 자주 오가는 용어 여섯 가지를 살펴봤습니다. 이제 채팅방에 이런 단어가 떠도 대화의 흐름이 그려지시죠? 다음 편에서는 기획자들이 문제를 잘게 쪼개고 파고들 때 쓰는 '사고 프레임', 즉 MECE·5WHY·As-is/To-be·벤치마킹 같은 생각 도구들을 쉽게 풀어보겠습니다. 복잡한 문제를 똑똑하게 정리하는 방법이 궁금하다면, 다음 글에서 다시 만나요.
이 시리즈의 다른 글