와이어 프레임 제작할 때 참고하기 좋은 서비스 2가지

와이어 프레임은 프로젝트 개발에서 매우 중요한 과정 중 하나입니다. 어떤 레이아웃에 따라 구성할 것인지, 포함되는 주요 기능은 무엇인지 등을 최대한 단순하게 확인하고 의견을 나눌 수 있는 기준이 되기 때문입니다. 물론 와이어 프레임 없이 작업하는 경우도 있지만 오히려 불필요한 커뮤니케이션이 늘어날 수도 있어서, 개인적으로는 최초 논의, 합의된 스펙에 따라 와이어 프레임을 빠르게 만들고, 미팅을 통해 구체화하는 과정을 꼭 거치고 있습니다. 무엇보다 와이어 프레임은 디자이너가 직관적으로 화면을 만드는 데 도움을 주며, 최소한의 기준을 벗어나지 않은 상태에서 자유롭게 작업할 수 있는 환경을 제공해 주기도 합니다.

이번 글에서는 와이어 프레임 제작에 도움을 주는 두 가지 서비스를 살펴볼 텐데요. 기능 단위로 와이어 프레임 사례를 확인할 수 있는 ‘Wireframe-Examples’와 텍스트 중심의 와이어 프레임을 간략한 조건에 따라 생성할 수 있는 ‘Wireframer’입니다.

1. 와이어 프레임 제작에 영감을 주는 ‘Wireframe-Examples’

먼저 소개할 서비스는 기능 또는 화면을 기준으로 와이어 프레임 사례를 확인할 수 있는  ‘Wireframe-Examples’입니다. 2024년 1월에 공개된 서비스로, 블로그 게시글을 통해 이 서비스를 만들게 된 이유를 살펴볼 수 있었는데요.

제작자는 와이어 프레임 사례를 모아 공유하는 이유를 ‘단순히 사례를 다양하게 보여주기 위한 목적만은 아니다’라고 설명했습니다. 와이어 프레임은 문제 해결, 사용자 중심 디자인에 관한 이야기를 시각적으로 보여주는 방법으로, 같은 작업을 하는 사람들에게 영감을 주고 싶었다고 하는데요. ‘레이아웃 구성, 버튼 위치 등 다양한 접근 방식과 방법론에 관한 통찰력을 얻고, 각자 자신의 프로젝트에서 새로운 아이디어를 얻길 바란다’라는 내용도 덧붙였습니다.

Wireframe-Examples 랜딩 페이지에서도 프로젝트를 위한 영감을 얻고, 와이어 프레임 사례를 통해 실제 제작에 필요한 작업 시간을 효율적으로 쓸 수 있다는 내용을 가장 먼저 확인할 수 있었는데요. ‘View All’ 버튼을 통해 등록된 전체 와이어 프레임 사례를 확인할 수 있고, 상단에는 블로그로 이동할 수 있는 메뉴와 피그마 UI를 구매할 수 있는 버튼이 포함되어 있습니다.

피그마 UI는 유료로 제공되고 있어서, 우선 웹사이트에 등록된 와이어 프레임을 살펴본 뒤 필요한 경우 구매하시는 편이 좋습니다.

이곳에서 와이어 프레임은 크게 10가지 카테고리에 따라 구분되어 있습니다. 내비게이션, 푸터, 로그인, CTA, 뉴스레터 등 우리가 서비스를 구성할 때 필수로 확인하거나, 구성해야 하는 내용에 따라 정리된 모습입니다. 아직 등록된 와이어 프레임 수가 많은 건 아니지만, 주요 기능이나 화면에 따라 확인할 수 있도록 정리된 점은 편리합니다. 왼쪽에서 원하는 카테고리를 클릭하면, 해당 카테고리에 포함된 와이어 프레임만 빠르게 확인할 수 있습니다.

가장 먼저 CTA(Call-To-Action) 와이어 프레임 사례를 살펴봤는데, 사례 리스트를 통해 와이어 프레임의 모습을 바로 확인할 수 있도록 구성된 모습입니다. 같은 기능에 대한 와이어 프레임이지만 다양한 사례를 볼 수 있어 실제 제작 시 도움을 받을 수 있는데요. 실제 화면 디자인 단계까지는 아니더라도, 와이어 프레임 제작을 위한 준비 단계에서 참고하는 기준으로 활용할 수 있습니다.

리스트에서 특정 와이어 프레임을 클릭하면, 조금 더 큰 이미지로 자세한 내용을 확인할 수 있습니다. 저는 왼쪽에 정보를 두고, 오른쪽에 CTA가 배치된 와이어 프레임을 제작 중이었는데요. 위 이미지와 같이 구성 내용을 자세히 볼 수 있어, 작업 중인 피그마에 이미지를 복사해 참고하면서 업무를 진행할 수 있었습니다.

한 번은 꼭 써봐야 하는 이유 

그동안 운영되고 있는 서비스나 콘셉트 디자인 형태의 화면 사례를 확인할 방법은 많았지만, 와이어 프레임 제작 단계에서 사례 찾기는 조금 어려웠던 게 사실입니다. ‘Wireframe-Examples’에서는 와이어 프레임 제작에 도움이 되는 주요 사례를 한눈에 살펴볼 수 있어, 기능이나 화면 단위로 하나씩 찾아야 하는 불편을 줄일 수 있었습니다. 와이어 프레임 사례는 계속 업데이트될 예정이라고 하니, 와이어 프레임 제작에 앞서 이곳을 한 번씩 둘러보는 것을 추천합니다.

2. 텍스트 기반 와이어 프레임 제작 ‘Wireframer’

두 번째로 소개할 서비스는 ‘Wireframer’입니다. 앞서 ‘Wireframe-Examples’는 화면이나 기능 단위의 와이어 프레임 사례를 확인할 수 있었는데요. 지금부터 살펴볼 서비스는 텍스트(플레이스 홀더) 기반의 와이어 프레임을 실제 제작할 수 있도록 도와주는 툴입니다. 간단한 편집 도구를 지원하며, 웹상에서는 물론 피그마 플러그인을 지원해, 피그마에서도 같은 방법으로 와이어 프레임을 제작할 수 있습니다.

먼저 편집 도구를 살펴보면 텍스트 정렬 기능으로 시작, 사각에서 원형까지의 테두리 모양, 단어 및 문장 수, 두께와 여백 그리고 컬러를 지정할 수 있습니다. 위 이미지는 제가 몇 가지 조건을 변경, 추가해, 제작한 와이어 프레임의 모습으로 첫 번째 이미지와 비교했을 때 많이 달라진 모습을 확인할 수 있는데요. 이렇게 완성된 와이어 프레임의 경우 .svg 형태로 저장할 수도 있고, 코드로 복사해 바로 적용해 보는 것도 가능합니다.

무엇보다 피그마 플러그인을 함께 제공한다는 점이 매력적인데요. 웹상에서 사용할 수 있는 도구를 그대로 사용할 수 있어 피그마로 와이어 프레임을 제작할 때, 텍스트 중심의 화면이나 기능을 표현할 수 있어 도움이 됩니다.

다른 점이 있다면 웹상에서는 편집 도구에 컬러값을 변경하는 내용이 포함되어 있지만, 피그마는 생성 후 피그마에서 지원하는 컬러 편집 도구를 활용할 수 있다는 점입니다. 플러그인을 통해 와이어 프레임을 제작할 땐 미리 보기도 지원하기에 편집 도구를 통해 입력하면, 변경한 조건에 따라 어떻게 적용되는지 빠르게 훑어볼 수 있습니다.

한 번은 꼭 써봐야 하는 이유 

보통 와이어 프레임에는 더미 텍스트 등을 잘 활용하지 않고, 텍스트가 포함되는 정도로만 표현하는 경우가 많은데요. 앞서 살펴본 ‘Wireframe-Examples’에서도 와이어 프레임 사례를 보면, 대부분 텍스트를 같은 방법으로 표기하는 것을 볼 수 있습니다.

따라서 상세한 정책까지 고려하는 단계는 아니지만, 텍스트 길이나 단어 수, 문장 수 등 대략적인 조건에 따라 와이어 프레임을 적용할 땐 하나씩 적용하느라 시간이 더 걸릴 수 있는데요. ‘Wireframer’ 같은 툴을 활용하면, 몇 가지 타입을 빠르게 만들 수 있다는 점에서 활용도가 높다고 생각합니다.

오늘 소개한 두 가지 와이어 프레임 서비스를 참고해, 더욱 편리하게 와이어 프레임을 제작할 수 있길 바랍니다.

<참고>

1. https://www.Wireframe-Examples.com/

2. https://Wireframer.art/

요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.