핵심 요약

  • AI는 디자인을 반복해서 다듬는 과정은 유지하면서 아이디어를 실제로 작동하는 시제품으로 옮기는 시간을 줄였다.
  • 디자이너의 책임은 여전히 최종 결과의 품질에 있다. 무엇을 만들지 정하고 AI의 결과를 선별하는 편집 능력이 더 중요해졌다.
  • 복잡한 동작은 작은 단위로 나누고 말로 설명하기 어려운 부분은 그림으로 전달해야 했다. 조절 패널을 만들어 내부 값을 직접 확인하는 방법도 효과적이었다.
  • 웹사이트에서도 선별이 중요하다. 제품의 가치를 먼저 보여주고 정보를 단계적으로 펼치며 사용자의 탐색을 방해하지 않아야 한다.

캔버스에서 작동하는 시제품으로

쇼피파이 제품 디자인 스튜디오를 이끄는 마빈 슈바이볼트(Marvin Schwaibold)는 Y Combinator의 ‘Design Review’에 출연해 AI를 활용하는 작업 과정을 공개하고 시청자가 제출한 웹사이트를 검토했다. 대화에서는 구현이 쉬워진 뒤 디자이너가 어디에 역량을 집중해야 하는지를 다뤘다.

슈바이볼트는 여전히 여러 안을 만들고 비교하는 과정을 반복한다. 달라진 것은 도구와 결과물이다. 이전에는 디자인 도구 피그마에서 화면을 정교하게 만든 뒤 개발자에게 넘겼다. 이제는 코덱스와 클로드 코드를 활용해 휴대전화나 컴퓨터에서 바로 시험할 수 있는 시제품을 빠르게 만든다. 피그마는 아이디어를 스케치하거나 AI에게 동작을 설명하는 공간으로 쓰는 비중이 커졌다.

그렇다고 AI가 디자인의 방향까지 정하는 것은 아니다. 슈바이볼트는 자신이 직접 작성할 수 없는 코드를 AI가 만들어주지만 무엇이 좋아 보이고 무엇이 어색한지는 자신이 판단한다고 말했다. 결과를 만드는 속도가 빨라질수록 다음 단계로 가져갈 결과를 고르는 일이 중요해진다.

쇼피파이에서 시제품이 대화의 출발점이 된 이유

쇼피파이에서는 관리자 화면을 새롭게 다듬는 작업과 AI 도우미 사이드킥이 대화로 상점 운영을 돕게 하는 작업이 함께 진행되고 있다. 슈바이볼트는 당시 자신의 스튜디오가 사이드킥에 집중하며 다른 디자인 조직의 업무와 일정에 밀접하게 연결돼 있다고 설명했다.

그가 공개한 시제품에서는 홈 화면이 판매자에게 상품 설명 수정을 제안했다. 판매자가 제안을 선택하면 사이드킥과 대화가 시작되고 수정 내용을 확인한 뒤 게시할 수 있었다. 사용자가 여러 메뉴를 찾아다니게 하기보다 필요한 기능을 그때그때 눈앞에 가져오려는 구상이다. 공개 화면은 개발용 패널이 포함된 시제품 환경이었다.

디자이너들은 이 환경에 아이디어를 직접 구현했다. 팀이 기본 방향에 합의하면 각자 가치가 있다고 보는 변형을 만들고 다시 같은 데모 안에 모아 비교했다. 슈바이볼트는 이런 시제품이 글로 쓴 제품 요구사항 문서보다 아이디어를 전달하고 조직의 관심을 얻는 데 유용하다고 봤다.

과거에는 아이디어 하나를 구현하려 해도 여러 협업자의 시간이 필요했다. 슈바이볼트는 이제 한 명이나 두 명이 더 넓은 범위의 작업을 수행하고 먼저 작동하는 결과를 보여준 뒤 논의를 시작할 수 있게 됐다고 말했다.

AI가 동작을 이해하지 못할 때는 그림으로 나눴다

구현이 빨라져도 의도를 정확히 전달하는 문제는 남았다. 슈바이볼트는 개인 프로젝트에서 잔디 영상들을 격자로 배치하고 하나를 열었다가 아래로 끌어 닫는 화면을 만들었다. 코덱스가 만든 첫 동작에는 불편이 있었다. 영상을 닫는 애니메이션이 완전히 끝나야 다른 영상을 열 수 있었다.

그가 원한 것은 사용자의 다음 입력이 앞선 동작을 끊고 이어지는 인터페이스였다. 설명이 잘 전달되지 않자 피그마에 단순한 색상 상자를 그렸다. 빨간 상자를 닫는 도중 파란 상자를 누르면 곧바로 파란 상자가 열리는 식으로 동작을 표현했다. 말이나 글로 전달하기 어려웠던 의도를 그림으로 보여주자 AI가 이해했다.

이 사례에서 피그마는 완성 화면을 만드는 도구보다 복잡한 동작을 작은 장면으로 풀어내는 도구에 가까웠다. 슈바이볼트는 AI의 구현 능력을 활용하려면 작업의 복잡성을 이해하고 이를 작은 과제로 나눌 수 있어야 한다고 강조했다.

프롬프트를 반복하는 대신 내부 값을 드러냈다

잔디 사진과 영상을 바탕으로 웹에서 움직이는 잔디를 만드는 실험에서도 같은 문제가 나타났다. 그는 시각 효과를 그리는 프로그램인 셰이더로 실제 잔디의 모습을 재현하려 했다. 처음에는 영상의 색과 세부 요소를 충실하게 옮겨달라고 요청했지만 결과는 기대와 달랐다.

그는 원본과 결과 화면을 다른 ChatGPT 대화에 함께 제시하고 자신의 설명에서 무엇이 빠졌는지 물었다. 빛과 그림자를 구체적으로 설명하고 장면을 여러 부분으로 나누는 방향으로 작업을 바꿨다. 잔디 아래가 평평한 바닥이 아니라 작은 언덕이라는 점도 중요했다. 높낮이가 드러나는 지형 그림을 만들어 전달하면서 결과가 나아졌다.

이후 프로젝트에 변수 조절 패널을 붙이는 도구인 DialKit을 넣었다. 잔디를 켜고 끄거나 길이와 바람을 직접 바꾸자 말로 수정을 요청할 때는 보이지 않던 문제가 드러났다. 앞선 단계에서 지형 구조를 잘못 해석한 탓에 결과가 기대에 못 미쳤다.

여러 항목을 옆으로 넘기는 캐러셀 실험에서도 조절 패널이 도움이 됐다. 항목을 끌어내린 뒤 놓았을 때 주변 항목에 움직임이 퍼지는 효과를 만들었는데 끄는 속도에 따라 힘이 얼마나 커질지를 세밀하게 조정해야 했다. 그는 91번의 프롬프트로 만든 결과의 내부를 패널로 살펴봤다. 어색함은 느낄 수 있었지만 대화만으로 원하는 값을 찾기는 어려웠다.

웹사이트에서도 더 많이 보여주는 것보다 고르는 일이 중요했다

시청자 웹사이트를 검토할 때도 같은 편집 원칙을 적용했다. 데스크톱처럼 꾸민 한 AI 작업 공간 사이트는 방문자가 곧바로 제품을 체험하게 한다는 장점이 있었다. 반면 사이드바와 채팅, 여러 버튼이 동시에 시선을 끌었고 무엇에 쓰는 제품인지도 너무 넓게 설명했다. 제품을 바로 보여줘도 사용자가 처음 무엇을 해야 하는지 알 수 있는 맥락은 필요했다.

다른 사이트에서는 많은 기능을 탭 뒤에 넣은 구성이 문제로 지적됐다. 진행자는 사용자가 모든 탭을 눌러보리라고 기대하기 어렵다고 봤다. 슈바이볼트는 주요 기능을 세 가지 정도로 압축해 먼저 보여주고 각각을 선택하면 자세한 내용을 펼치는 방식을 제안했다. 중요한 정보라면 페이지를 길게 만들어 드러내는 편이 낫다는 의견도 나왔다.

문서나 아이디어를 내레이션이 있는 애니메이션 영상으로 바꾸는 서비스는 정작 그 기능 설명이 페이지 아래에 있었다. 두 사람은 제품이 무엇을 하는지 위에서 먼저 설명하고 완성된 영상과 고객 사례를 쉽게 둘러보게 해야 한다고 봤다. 첫 화면의 문구 두 군데가 동시에 바뀌는 효과와 여러 글자 크기는 핵심을 파악하는 데 방해가 됐다.

슈바이볼트는 과거 스튜디오에서 정보를 한꺼번에 쏟아내기보다 관심에 따라 단계적으로 펼치는 방식을 썼다. 홈페이지의 각 구간을 하나의 장처럼 구성하고 더 알고 싶은 내용으로 자연스럽게 들어가게 했다. 무엇을 남기고 뺄지 결정하려면 팀 안에서 어려운 대화를 해야 하지만 복잡성을 줄이는 일 자체가 디자이너의 역할이라고 봤다.

섬세한 효과도 사용자의 속도를 따라야 한다

슈바이볼트는 과거 작업에서 책이 쌓이고 튀어 오르는 작은 애니메이션에도 공을 들였다. 디자인 회사의 웹사이트라면 이런 세부 동작이 고객에게 작업의 정교함을 보여줄 수 있다고 설명했다. 시각 효과가 사용자의 조작을 방해해서는 안 된다는 기준은 분명했다.

그는 웹사이트가 사용자의 스크롤 속도를 임의로 바꾸는 방식에 강하게 반대했다. 멈추고 싶은데 애니메이션이 계속 움직이면 사용자는 그 움직임을 상쇄하려고 다시 조작해야 한다. 캐러셀도 작은 버튼으로만 넘기게 하기보다 드래그나 트랙패드 동작에 반응해야 한다고 지적했다.

그가 중시한 것은 효과의 화려함보다 사용자의 다음 행동을 얼마나 자연스럽게 받아들이느냐였다. 영상 하나를 닫는 도중 다른 영상을 열 수 있어야 한다는 개인 프로젝트의 기준이 웹사이트 검토에도 그대로 이어졌다.

슈바이볼트가 보여준 풀스택 디자이너는 구상에서 구현과 조정까지 더 넓은 범위를 다루는 사람이다. AI가 그 범위를 넓혀줬지만 무엇을 보여주고 어떤 동작을 고칠지 판단하는 책임은 남았다. 그의 작업에서 완성도를 높인 것은 한 번의 지시보다 문제를 나누고 내부를 확인하며 결과를 거듭 고르는 과정이었다.