AI 시대의 프로덕트 매니저 10｜고충실도 우선: 지난 반년간 와이어프레임을 한 장도 그리지 않았다
지난주에 디자인하는 친구랑 밥을 먹는데, 자기네 팀은 와이어프레임 그리는 단계를 통째로 없앴다고 하더군요. 반 박자 멍하니 있다가 깨달았습니다. 저도 그렇더라고요. 돌이켜 Figma를 열어 보니, 「저충실도 와이어프레임」이라는 그 아트보드는 지난 반년간 한 번도 안 열었더군요.
제가 더 앞서가서 그런 게 아닙니다. 그려 봤자 쓸모가 없어져서 그런 겁니다.
와이어프레임은 싸다, 그게 유일한 장점이다
와이어프레임(wireframe)을 왜 그렸을까요? 「진짜로 만들기」가 너무 비쌌기 때문입니다.
진짜로 눌리는 페이지 한 판을 만들려면 디자이너가 시안을 뽑고, 프런트엔드가 화면을 짜고, 이리저리 맞춰 가며——빨라야 1~2주는 걸렸습니다. 이렇게 비싼 걸 만드는데, 당연히 회색 상자 스케치로 큰 방향부터 맞춰 놓고 내려가야 했죠. 헛수고를 안 하려고요. 저충실도 와이어프레임은 그냥 값싼 「미리 맞춰 보기」 도구였습니다. 싸다는 게 그것의 유일한 장점이었고요.
이제 「진짜로 만들기」가 비싸지 않습니다. 한마디면 Lovable, v0, Bolt, Claude Code가 몇 분 만에 브라우저에서 진짜로 눌리는 페이지를 내줍니다. n8n의 프로덕트 팀은 아예 와이어프레임 단계를 통째로 갈아 치웠고, Delivery Hero의 어느 디렉터는 엔지니어를 부르지 않고 한 시간 만에 손수 프로토타입 하나를 만들었습니다. 2026년 초 기준, 업계 리포트에 따르면 이미 67%의 디자인 팀이 AI 생성 도구를 일상 프로세스에 붙였다고 합니다.
「진짜 한 판 만들기」와 「가짜 한 판 그리기」가 걸리는 시간이 엇비슷해지면, 가짜 쪽은 존재할 이유가 별로 없어집니다.
회색 상자는 진짜 문제가 터지는 자리를 가려 버린다
저충실도에서 제일 골치 아픈 점은, 온 방 사람들을 회색 상자 앞에 세워 놓고 싸우게 만든다는 겁니다.
저도 여기서 데였습니다. 와이어프레임 한 장을 리뷰 회의에 올려놓으니, 다들 플레이스홀더 네모 하나를 노려보며 「이 버튼 오른쪽으로 두 칸 옮겨야 하지 않나」로 다퉜습니다. 근데 그건 회색 상자였어요——진짜 데이터도, 로딩 중도, 빈 목록도, 에러 한 줄도 없었죠. 정작 뒤집어질 자리를 와이어프레임은 하나도 못 드러냅니다. 진짜로 만들어 놓으니 문제는 죄다 그때 가려졌던 상태들 속에 있더군요. 데이터가 많아지면 줄이 어긋나고, 네트워크가 느리면 스피너가 하염없이 돌고, 처음 들어온 사용자는 텅 빈 화면 앞에서 뭘 해야 할지 모르고.
그 뒤로 정리가 됐습니다. 가짜 그림 앞에서 다들 머릿속으로 상상하게 하느니, 그냥 진짜를 꺼내 놓고 돌아가는 걸 같이 보는 편이 낫다고요.
저는 이제 곧장 돌아가는 걸 만든다
저충실도를 건너뛰고, 바로 돌아가는 고충실도로 갑니다. 「고충실도」라고 하니 거창해 보이는데, 실은 문턱이 그렇게 높지 않습니다. 네 가지뿐이고, 저는 대체로 이 순서로 갑니다(정답이라서가 아니라, 그냥 제 손에 익은 길입니다).
하나, 진짜 콘텐츠를 쓰고 Lorem ipsum은 안 씁니다. 플레이스홀더 텍스트는 사람을 속입니다——가짜 라틴어 한 화면은 보기엔 다 가지런하죠. 근데 진짜 긴 제목, 진짜 금액, 진짜 사용자 이름으로 바꾸는 순간 레이아웃이 바로 밑천을 드러냅니다. 그래서 AI한테 시킬 때 저는 대놓고 이렇게 적어 줍니다.
「주문 목록 하나 만들어 줘. 실감 나는 데이터로: 한글 상품명, 진짜 같은 가격대, 진짜 같은 타임스탬프로. Lorem ipsum 쓰지 말고, item1/item2 같은 것도 쓰지 마. 안에 엄청 긴 상품명 하나 넣어서 레이아웃이 터지는지 확인해 줘.」
둘, 상태를 빠짐없이 채웁니다. 로딩 중, 빈, 에러, 성공——하나도 빼지 않습니다. 저충실도가 제일 아끼는, 그래서 제일 잘 무너뜨리는 자리입니다. 저는 이제 한마디를 덧붙입니다. 「빈 목록은 어떻게 생겼는지, 로딩 중은 어떻게 생겼는지, 요청 실패는 어떻게 생겼는지 다 만들어 줘. 하나씩 눌러 가며 볼 거야.」
셋, 진짜로 눌립니다. 예쁜 스크린샷 한 장이 아니라요. 눌러 들어가지고, 돌아올 수 있고, 폼을 채워 넣으면 어떻게 반응하는지 볼 수 있어야 합니다. 많은 문제는 손가락이 진짜로 찔러 봐야 비로소 튀어나옵니다.
넷, 있어야 할 자리에서 한 번 진짜로 돌립니다. 휴대폰용은 휴대폰으로 열어 봅니다. 컴퓨터에서 대충 보고 넘기지 말고요. 「컴퓨터에선 멀쩡한데 실기에선 버튼이 안 눌리는」 일에 한두 번 데인 게 아니거든요.
한 판이 몇 분이니, 저는 한 번에 서너 방향을 만든다
예전엔 프로토타입 한 판이 비쌌으니, 저는 머릿속에서 안을 「최적」 하나만 남을 때까지 골라 놓고 손을 댔습니다——잘못 만들면 비쌌으니까요.
이제 한 판이 몇 분입니다. 이 버릇을 고쳤습니다. 뭘 풀어야 하는지 정리가 되면, 아예 AI한테 한 번에 서너 방향을 만들게 해서 나란히 놓고 봅니다. 목록형 한 판, 카드형 한 판, 한 방에 끝내는 한 판, 단계별로 안내하는 한 판. 브라우저에 나란히 띄워 놓고 눌러 보면, 어느 게 손에 붙고 어느 게 어색한지가 머릿속으로 공상하는 것보다 훨씬 또렷합니다. 한 방향을 골라 더 깊이 파는 게, 처음부터 하나에 걸어 맞기를 바라는 것보다 낫습니다.
한 오후에 다섯 방향을 시험해 보는 것, 와이어프레임 그리던 시절엔 감히 상상도 못 했죠.
한 가지만은 늘 경계합니다. 돌아가는 고충실도는 너무 진짜라서, 저 자신조차 첫 판을 보고 「이거다, 올리자」 싶어진다는 겁니다. 하지만 그건 「눌린다」일 뿐, 「출시할 수 있다」와는 십만 팔천 리 떨어져 있습니다——그 사이엔 아직 손 안 댄 경계 케이스, 성능, 보안, 진짜 데이터 규모가 잔뜩 끼어 있죠. 이 두 가지를 저는 몇 번이나 헷갈렸고, 다음 글에서 마침 이걸 따로 다룰 참입니다.
지금 저는 첫 판이 나온 뒤에 두 판을 더 만들라고 스스로를 몰아붙입니다. 제가 유별나게 자제력이 있어서가 아니라, 첫 판에 너무 여러 번 속아 봤기 때문입니다.
토론