이번 인터뷰에서는 코클(Cochl)의 사운드 AI 기술을 시각적으로 풀어내는 디자인 팀의 고민과 비전을 담았습니다. 스마트홈을 넘어 자동차, 휴머노이드, 실버 케어 등 다양한 산업군으로 확장될 사운드 AI의 미래 시나리오는 물론, 급변하는 AI 툴의 홍수 속에서 디자이너가 가져야 할 태도와 자신만의 역할 정의에 대한 진솔한 이야기를 함께 나눠볼게요!
Q. 이번 ‘Cochl Smarthome’ 웹사이트를 제작하게 된 배경과 핵심 목표는 무엇이었나요?
Cochl Smarthome Website
Cochl의 기술이 단순한 음성 인식뿐만 아니라 더 다양하게 사용될 수 있다는 것을 보여주고 싶었습니다. 하지만 이걸 단순히 텍스트나 스펙으로 설명하기엔 비전문가에게는 한계가 있기 때문에 한눈에 보이게 시각화해서 이해를 돕고, 체험을 유도해 흥미를 끄는 것이 핵심 메시지였습니다. 누구든 3분 안에 ‘아 이런 식으로도 사용할 수 있겠구나’를 느낄 수 있게요.
Q. 소리는 들을 수 있지만, 보이지는 않잖아요. 이런 소리의 ‘눈에 보이지 않는’ 특성을 웹에서 어떻게 표현하고자 하셨나요?
그래서 처음엔 어떻게 표현해야할지 많이 고민했습니다. 파형이나 그래프 같은 전형적 방식은 이해가 어려울 수 있고, 너무 기술적으로 보일 것 같았어요. 그래서 제가 선택한 건 "일상의 공간" 이었습니다.
소리는 눈에 보이지 않지만, 반드시 '원인'과 '결과'가 존재해요. 저는 이 원인과 결과의 연결을 '시각적 동기화’로 풀어냈습니다. 사용자가 특정 상황(버튼)을 클릭하면 소리가 발생하고, 그 소리를 AI가 인식함과 동시에 집 안의 오브젝트들이 반응하도록 설계했습니다.
Q. 어려운 기술을 쉽게 전달하기 위해 특별히 신경 쓴 부분이 있나요?
기술 용어를 최소화하는 것을 원칙으로 잡았습니다. "환경음 인식 AI" 같은 말 대신 "알람 소리가 들리면 조명이 켜진다"처럼 결과로 보여주는 방식으로요. 기술이 뭔지가 아니라 기술이 내 삶에서 무엇을 대신 해주는지를 보여주는 거예요. 그리고 시나리오도 일상에서 가장 공감하기 쉬운 장면만 골랐습니다.
그리고 사용자가 사이트에 접속하자마자 직관적으로 이해하게 만들기 위해 다양한 방법들을 구상했습니다. 가령, 텍스트 위주의 나열을 상단에 배치하기보다, '집의 단면도’를 핵심으로 구성했습니다. 또 소리를 직접 넣어서 흐름이 자연스럽게 애니메이션으로 이어지게 해서 사용자가 별다른 설명 없이도 체험하도록 했습니다.
Q. 다른 AI 디자인 툴들 중 Framer AI를 선택하신 이유가 있나요?
기술을 알리는 방법으로 디자인 시안을 만드는 것보다, 누구나 링크 하나로 접속해서 직접 체험할 수 있는 사이트를 만들고 싶었습니다. 디자이너로서 혼자 끝까지 해보고 싶었는데, 전문적인 코딩 실력은 없으니까 노코드 툴이 필요했습니다.
여러 툴을 봤는데 결국 Framer를 선택한 건 이 프로젝트에 필요한 조건이 딱 맞아서였어요. 소리와 클릭을 연결하고, 시나리오가 차례대로 펼쳐지는 인터랙션을 구현하면서, 동시에 웹으로 바로 배포까지 되는 툴이 필요했거든요. 그 조건을 가장 잘 충족하는 게 Framer였습니다.
Q. 프롬프트를 통해 와이어프레임을 생성했을 때, 초기 기대치(와이어프레임)와 실제 결과물(최종 웹사이트) 사이의 간극은 어느 정도였나요?
느낌을 잡기 위해 프롬프트로 만들어본 와이어프레임 (마지막 생성 팁을 참고해서 만들면 더 멋있게 만들 수 있을 것입니다)
와이어프레임이니까 인터랙션이나 애니메이션이 없는 건 당연히 알고 시작했습니다. 섹션 구조나 레이아웃은 방향을 잡는 데 참고가 됐고요. 다만 최종 결과물과 비교하면 간극은 조금 큰 편이었습니다. 처음부터 AI 결과물을 그대로 쓸 생각이 아니라 어디까지나 참고용으로 접근했기 때문에, 실제 구현은 대부분 직접 한 셈이에요. 다만 저는 디자이너로서 원하는 결과가 명확했기에 결과물을 위해 직접 제작을 한것이고, 애매한 분들은 충분히 도움받을 수 있는 기능이라 생각합니다.
Q. AI가 잡아준 초안이 전체적인 작업 시간을 단축하는 데 얼마나 실질적인 도움이 되었나요?
섹션 샘플들
위에서 얘기했듯 구조를 잡는데도 어느 정도 도움을 받았고, FAQ나 Pricing 같은 섹션의 대표 샘플을 Framer에서 제공해 줘서 참고하거나 그대로 발전시킬 수 있었어요. 백지에서 시작하는 것보다 훨씬 빠르게 방향을 잡을 수 있었습니다.
Q. 반대로 AI가 해결해주지 못해, 사람이 직접 작업해야 했던 부분은 무엇인가요? AI가 구현하지 못했던 특정 애니메이션이나 인터랙션 디테일이 있었나요?
흐름을 만들기에 만든 수많은 메인홈 Variant (이 안에 들어가는 움직임이 있는 컴포넌트들도 이런식으로 Variant가 있습니다)
메인이었던 집 단면도 애니메이션 전부가 AI가 못 한 영역이었어요. 제가 생각하는 대로 집 단면도와 그 안의 컴포넌트를 디자인하고, 클릭하면 소리가 나고, 그에 맞춰 집 안에서 오브젝트가 반응하고, 시나리오가 순차적으로 이어지는 흐름, 이런 인터랙션은 AI가 만들어줄 수 없었어요. 레이아웃이나 텍스트 배치는 어느 정도 도움이 됐지만, 정작 이 프로젝트의 핵심이었던 부분은 처음부터 끝까지 직접 했습니다.
Q. 그 한계를 극복하기 위해 유정 님만의 어떤 노하우(수동으로 키 프레임 작업, 음향 싱크 맞추기 등)가 들어갔는지 궁금합니다.
자연스러운 움직임을 위해 Delay, Time 등 거리와 시간 사이 간격 조정 (여기서 Instant/Ease/Spring도 각각 기능이 달라요.)
움직임이 있는 컴포넌트들도 각각마다 애니메이션 효과 적용. (왼쪽 Effects에는, 다양한 재미있는 움직임이 많아요.)
왼쪽/오른쪽을 분리하고 각각 멈춤·걸음 상태 제작 후 배치
AI가 하지 못한 부분을 해결하기 위해 저는 '초정밀 Variant 설계'를 하는 수동 작업을 선택했습니다. 애니메이션 효과도 Framer의 effect 기능을 하나하나 비교하며 적용했고, 특히 애니메이션 타이밍을 맞추는 게 제일 까다로웠습니다. 소리에 대한 반응이나/직접 클릭으로 오브젝트들이 움직이고, 자연스럽게 싱크가 맞아야 하는데 이걸 Framer에서 키 프레임을 직접 조정하면서 맞췄어요. 몇 번이고 재생해보면서 0. 몇 초 단위로 타이밍을 조정하는 작업을 반복했습니다.
Q. 이 과정이 단순히 Framer AI를 아직 더 많이 다뤄보지 못해서 발생한 숙련도의 문제였을까요, 아니면 현재 AI 기술의 물리적 한계였을까요, 아니면 디자인이라는 작업 특성상 발생하는 문제였을까요?
Framer가 AI 디자인 툴이라고 해서 써봤는데, 정작 이 프로젝트의 메인이었던 애니메이션은 AI가 아직 그 영역까지는 못 한다는 걸 직접 부딪히면서 알게 됐습니다. 레이아웃은 2D 공간 배치 문제라 AI가 어느 정도 정답을 낼 수 있었지만 애니메이션은 타이밍, 이징, 순서, 트리거 조건까지 "시간"이 변수로 들어가고, 거기에 "이 브랜드가 어떤 느낌이어야 하는가"까지 맞물려야 합니다. 같은 버튼 클릭도 통통 튀게 할 수도 있고 차분하게 페이드로 할 수도 있는데, 그 판단은 디자이너의 의도에서 나오는 것이니까요. 소리와 움직임과 타이밍이 맞물리는 인터랙션은 결국 사람이 맥락을 설계해야 하는 영역이라, 제가 의도한 걸 AI가 파악해서 자연스럽게 구현해 주는 것은 아직은 부족하다고 느꼈습니다.
Q. 소리와 디자인의 싱크를 맞추는 과정에서 가장 까다로웠던 지점은 무엇이었나요?
소리의 길이에 맞춰 컴포넌트의 움직임을 조절하거나, 반대로 컴포넌트에 맞춰 소리 길이를 조절하는 방식으로 싱크를 맞췄는데, 사실 이 부분 자체는 크게 까다롭지 않았습니다.
가장 힘들었던 건 수많은 Variant를 하나의 흐름으로 자연스럽게 이어지게 만드는 과정이었습니다. Variant가 늘어날수록 잘 작동하던 움직임이 갑자기 튕기거나 의도치 않은 방향으로 날아가는 현상이 생기거든요. 결국 하나하나 직접 들여다보며 조절하는 수밖에 없었고, 그 과정이 이번 작업에서 가장 까다로운 부분이었습니다.
Q. 다양한 디자인 AI 툴들이 나오는 시점에서 AI를 통해 나오는 결과물과 디자이너의 손맛이 들어간 결과물의 결정적 차이는 있다고 보시나요? 만약에 존재한다면, 그 차이는 어디에서 오는 걸까요?
AI는 받는 대로 평균적으로 좋아 보이는 걸 만든다고 생각합니다. 디자인이라는 분야 자체가 결과물이 눈으로 바로 확인되다 보니, 사람들 눈에는 AI가 꽤 잘하는 것처럼 크게 느껴지기도 하고요. 하지만 아직은 정교하게 들여다보면 디자이너 눈에는 어색한 점이 보입니다. 그리고 디자이너는 그걸 고칠 수 있고요. 차이는 결국 의도와 판단에서 온다고 생각합니다. AI는 주어진 조건 안에서 최적의 결과를 내지만, 조건 자체를 설정하는 건 사람입니다. 어떤 감정을 만들고 싶은지, 어떤 순간에 시선이 멈춰야 하는지, 왜 이렇게 만들어야 하는지, 그 질문을 던지고 답을 내리는 건 아직 디자이너의 영역이라고 생각합니다. 또 디자이너마다의 고유한 스타일이나 경험도 무시할 수 없고요.
Q. 디자이너의 역할이 전통적인 역할에서 바뀌어 가는 부분이 있음을 느끼시나요?
네. 예전에는 디자이너가 디자인 툴을 잘 다루는 것 자체가 전문성이었다면, 이제는 AI 툴을 어떻게 활용하느냐가 그 전문성의 일부로 편입되었습니다. AI가 디자인적으로 더 완성도 있는 결과물을 내는 데 도움이 되는 건 확실하니까, 디자이너로서 전문 지식을 바탕으로 프롬프트를 잘 짜거나 의도를 구체화해서 결과물을 원하는 방향으로 이끌어가는 능력이 점점 더 중요해지는 것 같습니다. AI의 한계를 얘기했지만, AI는 계속 발전할 거고, 그래서 오히려 지금부터 이런 전문적인 설계 능력을 갖춰두는 게 필요하다고 생각합니다.
그리고 활동 범위도 넓어지는 것 같고요. 원래는 디자인에만 집중했다면, 이제는 AI 툴의 도움을 받아서 이번처럼 내용 구성이나 기획에도 손을 뻗어볼 수 있고, 웹사이트 제작까지 혼자 해볼 수 있게 됐습니다. 다른 분야의 전문가만큼 깊이 할 수는 없겠지만, 더 다양한 영역을 넘나들 수 있었습니다. 더 나아가 커뮤니케이션할 때 더 도움이 되고, 이에 따라 높아진 협업 퀄리티를 기대할수 있지 않을까 합니다.
Q. Framer를 처음 접하는 비 디자이너 직군이나 혹은 마케터에게 추천하고 싶은 기능이 있다면 무엇일까요?
•
CMS : 마케터나 기획자한테 특히 유용할듯합니다. 처음 구조는 디자이너가 세팅해 두면, 그 이후엔 블로그 포스트, 이벤트 공지, 뉴스레터 같은 콘텐츠를 디자인 건드리지 않고 직접 관리하고 발행할 수 있어요. 개발자나 디자이너한테 매번 요청 안 해도 되니까 업무 효율이 올라갑니다.
•
AI Translate : 사이트 전체를 다른 언어로 자동 번역해줘서 글로벌 서비스 홍보가 가능하며 번역에 드는 시간을 절약할 수 있습니다.
•
템플릿 : Framer 커뮤니티에 전 세계 디자이너들이 만든 무료/유료 템플릿이 많아서, 백지부터 시작하는 대신 검증된 레이아웃을 가져와서 텍스트랑 이미지만 바꾸면 바로 퍼블리싱할 수 있습니다.
Q. 이번 작업을 통해서 유정 님이 경험하셨던 Framer AI 사용 시 시행착오를 줄일 수 있는 유정 님만의 팁이 있을까요?
[Framer AI에서 사용할 수 있는 와이어 프레임 프롬프트 작성법]
1.
영어로 쓰기
2.
한 세션에서 끝내기 — Wireframer 채팅은 프로젝트를 닫거나 Framer를 종료하면 대화 내용이 사라지므로, 프롬프트는 한 세션에서 끝내기
3.
프롬프트 먼저 다 끝내고 수동 편집하기 (수정하면서 하면 꼬일 수도 있음)
4.
섹션을 나눠서 요청하기 — 전체를 한 번에 만들어달라고 하면 퀄리티가 떨어져요. "hero section only", "feature cards section" 이렇게 섹션 단위로 쪼개서 요청하는 게 결과물이 더 나아요.
5.
섹션 추가는 채팅으로
6.
구체적인 레퍼런스를 언급하기 : "minimal landing page" 보다 "landing page like [레퍼런스 사이트1] or [레퍼런스 사이트2], dark and minimal" 이렇게 레퍼런스 사이트 이름을 넣으면 스타일을 훨씬 잘 잡아요.
7.
톤앤매너 알려주기 :warm and friendly, dark and technical… (like ‘레퍼런스 브랜드’ 언급해도 괜찮음)
Q. 이번엔 스마트홈을 다루셨는데, Cochl의 사운드 AI를 또 다른 어떤 가상 공간이나 산업군에 접목해 시각화해보고 싶으신가요?
차량, 휴머노이드, 노인 케어 등 다른 산업군을 주제로 시나리오를 만든 것들이 있습니다. 필요하면 더 만들어둘 수도 있고요. 다음엔 다른 방식으로 시각화해 보고 싶습니다. 이번엔 애니메이션 체험형 사이트라는 도구를 썼지만, 다음엔 또 다른 방식으로 디자인이라는 요소를 접목해서 "와, 이런 것도 있구나!" 하는 첫인상을 줄 수 있는 무언가를 만들고 싶습니다. 어떤 주제를 어떻게 기발하게 보여줄 수 있을까를 늘 생각하고 있어요.
Q. AI 디자인 툴 도입을 망설이거나, 기술적인 구현 앞에서 어려움을 겪고 있는 동료 디자이너들에게 해주고 싶은 조언이 있다면 무엇인가요?
AI 디자인 툴은 점점 다양해지고 있고, 각 툴마다 강점도 다릅니다. 저도 꾸준히 공부해야 하는 디자이너로서, 퀄리티를 높일 수 있는 부분엔 적극적으로 쓰고, 반대로 "이 부분은 AI와 다르게 내 강점으로 가져가야겠다" 싶은 건 따로 새겨두고 있어요. 결국 변화하는 흐름을 파악하고 적당히 익혀두는 것, 그리고 AI와 나 사이의 역할을 스스로 정의해가는 게 중요한 것 같습니다.