AI 비서와 함께 만드는 와이어 프레임 ‘Scene’

최근에 업무 단계에 따라 AI를 활용하는 경우가 많아졌습니다. 특히 관심 있게 보는 부분은 기획 단계에서 끝나는 것이 아니라, 이를 구체화하고 실제 적용할 수 있는 단계까지 활용하는 것입니다. 다만 아직 한 서비스에서 모두 가능하진 않아서, 여러 서비스를 조합하거나 연동 후 자동화하는 방법을 주로 활용하고 있습니다.

오늘 소개하는 ‘ Scene ’는 이러한 불편함을 상당 부분 해소해 주는 서비스로, “아이디어가 웹사이트가 되는 곳, 아이디어부터 출시까지 전체 과정을 진행할 수 있는 곳입니다.”라는 슬로건을 내세우고 있습니다. 이 서비스 핵심은 ‘뮤즈’라는 이름의 AI 비서입니다. 뮤즈를 통해 웹사이트 개요를 구체화하거나, 경쟁사 조사, 와이어 프레임 생성, 웹사이트에 필요한 카피를 작성하거나, 보완하는 등 업무에 활용할 수 있습니다.

‘ Scene ’를 사용해 본 한 디자이너는 ‘학습을 위해 별도의 시간이 필요하지 않으며, 가입 후 웹사이트를 구축하는데 10분이 채 걸리지 않았다’라는 리뷰를 남겼는데요. 또 다른 디자이너는 피그마, 윅스, 챗지피티가 하나로 통합된 서비스를 사용하는 것 같은 경험을 했다고도 말했습니다. 과연 실제로 이러한 경험이 가능한지, 그만큼 아이디어를 구체화하는 과정에 많은 도움을 받을 수 있는지 지금부터 자세히 살펴보겠습니다.

AI 비서와 함께하는 와이어 프레임 제작

우선 가입과 동시에 웹사이트 제작을 위한 편집 화면을 만날 수 있습니다. 우측 하단에는 앞서 핵심 기능 중 하나로 소개한 ‘뮤즈 AI 비서’가 자리 잡고 있습니다. 일반적인 서비스라면 왼쪽 도구모음을 통해 필요한 블록을 확인 후, 추가하는 방법을 먼저 고려해야 했는데요.

뮤즈라는 AI 비서 덕분에 샘플로 시작하기, 협업의 방법으로 와이어 프레임 제작하기 등의 버튼 클릭 한 번으로 시작이 가능한 환경을 제공합니다. 프롬프트를 입력해 시작하는 것도 가능하며, 와이어 프레임을 생성하는 것과 비서와 대화하는 것 두 가지 중 하나를 선택할 수 있습니다.

저는 샘플로 시작하기를 선택했는데요. ‘Landing page for Brewpilot, designed for coffee lovers on the move. Offering a portable solution for brewing a perfect cup of coffee anywhere, anytime. (이동 중에도 커피 한 잔을 추출할 수 있는 제품의 소개를 위한 랜딩페이지)’ 이런 프롬프트를 생성했습니다. 그리고 다음 단계로 이동했죠.

먼저 ‘AI 노트북’이 와이어 프레임 제작을 위한 서비스 브리프를 작성해 줬습니다. 꽤 상세하게 작성되어 놀랐는데, 포함된 내용 중 일부를 살펴보면 아래와 같습니다.

제품 또는 서비스에 대한 설명: 브루파일럿은 이동 중인 커피 애호가들을 위한 최고의 휴대용 커피 추출 솔루션입니다. 작고 가벼운 디자인으로 언제 어디서나 완벽한 한 잔의 커피를 추출할 수 있습니다. 대상 고객: 제인을 만나보세요. 커피를 좋아하지만, 항상 이동이 잦은 바쁜 직장인입니다. 그녀는 품질과 편의성을 중요하게 생각하며 장소에 구애받지 않고 좋아하는 커피를 즐깁니다. 페르소나 인사이트: 모험심이 강하며, 품질에 민감하고 시간에 쫓기는 사람 잠재고객: 25~45세, 도시 거주자, 여행자, 전문가에 가깝고, 편의성을 중시하며, 기술에 정통하고, 고급 커피를 즐깁니다. 웹사이트의 역할: 제품의 이점을 명확하게 제시하고, 고유한 기능을 안내하며, 방문자를 구매자로 전환해야 합니다. 톤앤매너: 쾌활하고 유익한, 신뢰할 수 있는, 경쾌한 분위기 메시지 샘플: 어디에서나 완벽한 한 잔을 추출하세요. 이동이 많은 라이프를 위해 설계된 완벽한 동반자 디자인 방향: 깔끔하고 세련된 이미지, 휴대성과 사용성을 보여주는 고품질의 제품 이미지, 탐색이 쉬운 인터페이스, 커피의 편안함을 연상시키는 색상 활용 웹사이트 구조: 히어로 섹션, 제품 특징, 작동 방식, 추천(리뷰) 글, 혜택, 구매 등을 위한 CTA, FAQ, 푸터

와이어 프레임을 바로 제작했다면 어떤 배경과 목적으로 만드는지 헷갈릴 수 있고, 생성에 필요한 크레딧 등을 계속 소비하는 상황을 마주할 수 있는데요. 이곳에서는 원하는 내용에 따른 브리프를 먼저 확인하고 수정한 뒤, 제작할 수 있어서 더 생산적인 작업이 가능했습니다.

그 다음 와이어 프레임 생성 버튼을 누르면, 세 가지 버전으로 생성된 와이어 프레임을 확인할 수 있습니다. 플랫폼으로 구분하며 PC, 태블릿, 모바일 버전입니다. 대표 해상도에 맞게 여러 벌 작업하거나, 고려할 필요 없이 생성 단계부터 세 가지 버전을 확인할 수 있어 이후 편집 및 수정이 편하게 다가옵니다. 와이어 프레임 제작 전 확인한 노트(브리프)는 계속 유지되어, 함께 확인하며 더 보완해야 하거나 수정해야 할 부분을 비교하기 좋습니다.

와이어 프레임이 완성된 후엔 두 가지 방법으로 상세 편집이 가능한데요. 하나는 브리프에 해당하는 내용을 수정한 뒤 와이어 프레임 자체를 다시 생성하는 방법입니다. 또 하나는 헤더, FAQ 등 특정 영역을 선택해 텍스트, 이미지 등의 내용을 직접 편집하는 방법입니다.

앞서 와이어 프레임이 플랫폼에 따라 3가지 버전으로 생성된다고 했는데, 편집 과정에서 한쪽을 수정하면 다른 두 곳의 내용도 동일하게 반영되도록 기본 설정되어 있습니다. 작업 과정에서 각 해상도와 플랫폼에 맞는 내용을 빠르게 살펴볼 수 있습니다.

와이어 프레임 제작과 관련해, AI 비서 뮤즈와 추가 대화를 이어가는 것도 가능합니다. 저는 제품이 사용되는 상황이 담긴 여러 이미지를 랜딩 페이지에 적용하고 싶다고 했는데요. 섹션에 따라 어떤 식으로 이미지를 적용하면 좋을지에 대한 의견을 남겨줬습니다. 답변 내용 중 일부는 아래와 같습니다.

제품 특징: 제품의 주요 기능에 따라 해당 이미지를 포함하세요. 예를 들어, 휴대성에 대해 설명할 때는 차 안에서 또는 여행 중에 브루파일럿을 사용하는 사람의 이미지를 포함하세요. 이렇게 하면 기능을 실제 사용 환경과 직접 연결하여 공감대를 형성할 수 있습니다. 제품 작동 방식 안내: 이 섹션에서는 사용자에게 프로세스를 안내하는 일련의 이미지를 사용합니다. 주방 조리대, 피크닉, 워크스테이션 등 다양한 위치에서 브루파일럿을 사용하는 이미지를 포함하세요. 이 시각적 가이드는 사용자가 다양한 상황에서 사용 편의성을 이해하는 데 도움이 됩니다. 사용 후기: 후기를 통해 자연스레 이미지를 연출하는 것도 가능합니다. 예를 들어, 하이킹 중 커피를 즐기는 것에 대한 사용 후기가 있다면 경치 좋은 야외 환경에서 Brewpilot을 사용하는 모습을 보여주세요. 이렇게 하면 고객 경험과 시각적으로 연결됩니다. 이렇게 작성된 답변은 노트로 생성해 와이어 프레임 옆에 참고 내용으로 두거나, 브리프애 추가한 뒤 다시 와이어 프레임을 생성하는 데 활용할 수 있습니다.

와이어 프레임을 효율적으로 제작할 수 있는 도구 제공

와이어 프레임을 AI 비서의 도움으로 쉽게 생성할 수 있는 건 좋지만, 아직 한 번에 만족스러운 결과를 얻기는 어렵습니다. 그래서 와이어 프레임을 좀 더 구체화하고 입맛에 맞게 만들 수 있는 기능을 지원합니다. 대표적으로 각 영역에 맞는 이미 준비된 블록을 클릭 한 번으로 불러올 수 있습니다. 또 메모 기능이나 노트 기능을 지원해, 협업 과정에서 서로의 의견을 기록할 수 있습니다.

서비스를 처음 소개할 때, 아이디어로 시작해 발행까지 가능하다고 얘기했는데요. 이곳에서도 사이트 이름, 주요 언어, 파비콘, 도메인, 외부 서비스 연동 등의 기능을 활용할 수 있습니다. 연동 서비스에는 쿠키 설정을 도와주는 쿠키봇을 포함해, 구글 태그 매니저, 구글 애즈, 구글 애널리틱스 등이 포함되어 있습니다.

한 번은 꼭 써봐야 하는 이유

위 이미지는 작업 중인 와이어 프레임을 공유 링크로 확인한 모습입니다. 홀로 작업하는 환경이 아닌, 여러 명이 함께 작업하는 환경을 고려한 기능 중 하나입니다. 이처럼 와이어 프레임으로 시작해 이미지를 채우고, 블록을 더해 하나의 잘 디자인된 웹사이트를 만들 수 있도록 도와주는 것이 핵심입니다. 이 과정에서 AI 비서 뮤즈를 적절히 사용할 수 있다는 점이 가장 큰 장점입니다.

다만 뮤즈와 대화한 내용이 중간에 사라진다거나, 제안이 아닌 제작자의 입장에서 역으로 피드백을 제공하는 등의 문제가 발생한다는 점은 아쉬운 부분입니다. 아직 서비스 초기이고 곧 웹플로우와의 연동 기능도 제공할 예정이라고 하니, 사용성은 앞으로 더 좋아지지 않을까 싶습니다.

https://www.scene.io/