디자인 커뮤니케이션 툴, 윔지컬(Whimsical)
윔지컬(Whimsical)이라는 단어는 '기발한' '신박한' 정도로 번역할 수 있는데, 실제로 써보면 그 이름에 걸맞은 사용자 경험을 제공한다. 나는 디자이너가 아닌 프로덕트 매니저로 일하고 있어(UI 관련 업무도 거의 없다) 디자인 관련 툴이 썩 필요하지는 않은데, 그럼에도 불구하고 이 툴은 업무에 필히 적용해야겠다는 생각이 들었다.
윔지컬은 플로우차트, 마인드 맵, 와이어프레임 같은 아이디어 디자인용 도구와 노션을 합쳐놓은 느낌의 툴이다. 문서 형식을 지원하기는 하나 글보다는 그림에 특화되어 있다. 윔지컬의 CEO도 "문서는 이미 노션, 드롭박스 페이퍼 등 관련 솔루션이 많다. 하지만 플로우차트, 간단한 메모, 와이어프레임 툴은 아직 부족하다"라며 그림 기반 커뮤니케이션에 집중하고 있음을 밝혔다.
과연 윔지컬은 그림 커뮤니케이션계의 노션(Notion)이 될 수 있을까? 일단 어떤 툴인지부터 살펴보자.
1. 어떻게 생긴 툴인가?
윔지컬의 기본 레이아웃은 노션과 유사하다. 왼쪽 사이드바에 아이디어 페이지들이 있고, 오른쪽에는 내용이 표시된다. 페이지 간의 위계도 페이지를 위아래로 끌거나 다른 페이지 속에 집어넣는 식으로 정렬할 수 있다. 다른 점이라면 개인 워크스페이스와 공유 워크스페이스가 같은 사이드바에 표시된다는 점 정도. 노션을 써 본 사람이라면 금방 익숙해질 수 있다.
페이지 형식은 문서, 플로우차트, 와이어프레임, 포스트잇 메모, 마인드맵 중 원하는 것을 골라 만들면 된다. 각 형식마다 제공되는 도구가 약간씩 다르니 용도에 맞는 형식을 선택해 사용하면 된다 예를 들어 와이어프레임 형식에서는 UI 템플릿이 기본 제공되며, 마인드맵에서는 마인드맵용 UI가 따로 제공되는 식이다.
문서 형식은 페이지 중에서 가장 종합적인 성격을 띠고 있다. 개별 페이지로만 존재해야 하는 그림 형식과는 달리, 문서 페이지에는 글뿐만 아니라 플로우차트, 와이어프레임 페이지들을 내용에 삽입할 수 있다. 간단한 플로우차트만으로 충분하다면 문서 형식은 필요 없지만, 뭔가의 기획서를 만들어야 한다면 문서에 모든 내용을 종합하면 편하다. 문서에는 다른 사람이 코멘트를 달 수 있으므로 아이디어 논의에 제격이다.
보너스 팁: 페이지 안에서 반드시 한 가지 형식만 사용하지 않아도 된다. 예를 들어 플로우차트 페이지 안에서 사이드바의 'Mode' 버튼을 누르면 와이어프레임, 마인드 맵 등 다른 형식으로 변환할 수 있다(문서로는 변환 불가). 즉, 문서는 모든 정보를 종합하는 곳이고, 그 외에 그림을 그리는 곳은 형식에 구애받지 않고 필요한 만큼 섞어 쓰면 된다.
2. 주요 기능 하나씩 살펴보기
1) 문서 작성
노션의 문서 페이지와 매우 유사하나 보드, 갤러리 같은 형식은 빠져있다. 노션의 가벼운 버전 정도로 생각하면 된다. 그래도 제목, 소제목, 체크리스트, 숫자 및 목록 표기, 코드 블록 등 문서를 작성하는데 필요한 기능은 대부분 있으니 쓰는데 무리는 없다.
윔지컬 내의 다른 페이지를 불러오거나 외부 링크를 끼워 넣는 것도 가능해 간단한 디자인 문서를 작성하는데 충분하다. 구글 문서처럼 항목별로 코멘트를 달 수 있고, 문서 전체에 대한 논의가 필요하면 맨 아래에 댓글을 달면 된다. 개인적으로 노션보다 글 쓸 때의 느낌이 좋아(왠지 더 깔끔하다) 노션 문서들을 옮기고 싶었지만 문서 내 검색이나 태그 같은 기능이 없어 그만뒀다.
보너스 팁: 노션처럼 문장 하나하나가 블록(아이템)으로 인식된다. 따라서 문장의 위치를 옮길 때 복사/붙여넣기 할 필요 없이 마우스로 끌면 하면 된다.
2) 플로우차트
제품이 어떤 식으로 작동하는지 다른 사람에게 설명할 때 플로우차트는 꽤 유용하다. 윔지컬의 샘플 페이지에 가보면 윔지컬의 기술 세팅이 어떻게 되어있는지를 플로우차트로 그려놨다. 제품에 대한 자신감과 애정이 느껴지는 부분이었다. 예전에 슬랙이 '유저에게 알림을 보내야 하는가?'를 결정할 때 어떤 식으로 결정되는지 플로우차트를 공개한 적이 있었는데, 이걸 윔지컬 스타일로 재현해놓은 것도 있다. 샘플 플로우차트를 꼭 둘러보기를 권한다.
나는 평소에 구글 드라이브에서 제공하는 다이어그램(이전 이름: draw.io)을 활용했는데, 지금은 완전히 윔지컬로 갈아탔다. 정말로 정교한 플로우차트를 만들려면 구글 것이 나을지도 모르지만, 간단한 것이라면 윔지컬이 훨씬 괜찮다고 느낀다. 네모와 네모 사이를 화살표로 이을 때, 텍스트를 추가할 때, 화살표 방향을 바꿀 때 등 뭔가 추가하고 바꿀 때 윔지컬은 나의 의도를 매우 잘 이해한다.
예를 들어 네모를 추가하면 (당연히 다음 네모를 추가할 것으로 생각하고) 빠른 연결 버튼을 보여주는 식. 굳이 새 네모를 가져와서 화살표로 이을 필요 없이, 빠른 연결 버튼을 누르기만 하면 새 네모가 만들어지고 화살표로 연결된다. 작성자가 다음에 어떤 행동을 취할지 대부분 뻔하기 때문에 스마트하게 캐치한다.
구글의 다이어그램보다 자유도는 떨어지지만, 윔지컬은 필요한 기능을 제때제때 눈앞에 보여줘 간단한 플로우차트 그릴 때는 제격이다. 디자인도 더 깔끔하다.
보너스 팁: 도형을 추가할 때 기본은 흰색에 직선 테두리로 스타일이 설정되어 있다. 만약 다른 색깔과 테두리를 기본 스타일로 지정하고 싶다면 일단 입맛에 맞춰 변형시킨 후, 도형을 클릭 → 더보기 메뉴에서 'Save as Default Style'을 클릭하자. 그러면 다음에 도형을 추가할 때는 지정한 모양으로 추가된다.
3) 와이어프레임
와이어프레임 툴이야 피그마(Figma)처럼 훌륭한 서비스들이 이미 많다. 하지만 피그마 같은 툴까지는 필요 없을 때, 간단한 프로토타이핑과 아이디어 스케치 정도로 충분하다면 윔지컬에서 해결 가능하다.
와이어프레임에 필요한 기본 템플릿을 풍부하게 (그러나 너무 과할 정도는 아닌) 제공하기 때문에 디자인 소스가 부족한 나 같은 사람에게 유용하다. 검색창, 버튼, 툴팁, 별점 같은 UI 요소뿐만 아니라 다양한 클립아트도 제공된다. 위 이미지의 스마트폰과 검색창, 곰 아이콘도 모두 기본 템플릿을 끌어다 배치한 것이다.
보너스 팁: 스마트폰 템플릿에는 가로/세로 모드, 키보드 ON/OFF 기능이 있어 굳이 이미지를 직접 돌리거나 키보드 그림을 추가하지 않아도 된다. 버튼 하나만 누르면 그 즉시 바뀐다. 감동.
4) 포스트잇 메모(Sticky Notes)
이름 그대로 포스트잇 형태의 메모를 화면 여기저기에 붙여놓을 수 있다. 포스트잇은 제목과 본문 텍스트로 이루어져 있어 텍스트 양이 길어져도 문제없다. 겉으로는 제목만 표시되고, 클릭하면 상세 내용을 볼 수 있다. 말 그대로 아이디어에 아직 체계가 잡히지 않았을 때 여기저기 늘어놓는 용으로 좋다.
재밌게도 포스트잇 기능만 제공하는 것으로 끝나지 않고 보드를 만들 수 있다. 원한다면 포스트잇 메모는 원한다면 보드에 추가할 수 있고, 보드에 추가된 메모는 위아래로 움직이면서 정렬 순서를 바꿀 수 있다. 쉽게 칸반 보드가 만들어지는 셈이다. 간단한 프로젝트 관리나 개발에 필요한 유저 스토리를 모아놓는 용으로도 괜찮아 보인다.
메모 안에서는 본문 텍스트뿐만 아니라 코멘트를 달거나 (같은 워크스페이스 내의) 담당자를 지정할 수 있어 간단한 프로젝트 관리용으로 쓰기에 정말 괜찮다. 아이디어를 실행에 옮겨야 하지만, 지라(JIRA)처럼 본격적인 툴까지는 필요 없을 때 유용하다.
보너스 팁: 메모의 상세로 들어가면 오른쪽 상단에 눈동자 모양의 아이콘이 있다. 이 아이콘을 클릭하면 해당 메모를 'Watch'하게 되며, 내가 만든 메모가 아니더라도 메모에 업데이트되는 내용이 있으면 이메일 알림을 받게 된다. 다른 사람의 메모를 추적하고 싶을 때 좋다.
5) 마인드맵
개인적으로 마인드맵을 자주 사용하지는 않는다. 그러나 아예 안 쓰는 것도 아니라서 마인드맵 전문 서비스를 따로 쓰기에는 조금 애매했다. 그래서 무료 마인드맵 사이트를 따로 찾거나 종이에 그려서 하곤 했는데, 이제 윔지컬에서 해결할 수 있으니 마음이 한결 가벼워졌다.
윔지컬 마인드맵은 가볍고 깔끔하다. 마인드맵에 딱 맞는 빠른 실행 UI를 제공해 생각의 가지를 뻗어나가기 편하다. 아이디어 위계나 위치를 바꾸는 것도 마우스로 대충 끌다 보면 힌트 UI가 표시되어 직관적이다. 이미지나 아이콘을 추가하는 것도 가능해 필요한 건 다 있어 보인다.
그러나 치명적인 단점이 하나 있으니 바로 한글 입력이 매끄럽지 못하다는 점이다. '안녕하세요'라는 단어를 입력할 때, '요'까지 입력 후 넘어가면 이상하게도 '안녕하세'까지만 입력되어 있다. 반드시 입력 후 오른쪽 화살표 버튼을 눌러 커서를 맨 끝으로 옮겨주어야 글자가 사라지지 않는다. 다른 형식에서는 괜찮은데 마인드맵이 유독 한글 호환성이 좋지 않다.
보너스 팁: 마인드맵이라고 반드시 양 옆으로 뻗어나갈 필요는 없다. 중간의 핵심 아이디어를 누르면 상세 메뉴가 나오는데, 여기서 Horizontal(가로)이 기본 값으로 되어있다. Vertical(세로) 버튼을 누르면 양 옆에 있는 아이디어들이 위아래로 뻗어나가도록 모양이 바뀐다.
3. 어디에 활용하면 좋을까?
아이디어를 간단하게 시각화해야 하는 경우라면 어디에서든 활용될 수 있다고 생각한다. 전문 디자이너에게는 윔지컬이 조금 부족할 수 있지만, 나같이 가벼운 도구가 필요한 사람에게는 제격이다.
프로덕트 매니저 일을 하다 보면 시스템이 어떤 식으로 작동하는지 설명해야 할 때 → 화면 공유해놓고 윔지컬 창 하나 띄워놓고 플로우차트 그리면서 설명. 물론 draw.io 같은 툴도 있지만, 윔지컬의 시각화가 워낙 잘 되어 있고 로딩도 빨라 잠깐씩 쓰기에 좋다.
또한 노션이나 에버노트에 개인 메모를 정리하는 사람이 많을 텐데, 이때 메모 속에 삽입할 다이어그램이나 마인드맵 등을 윔지컬에서 만드는 것도 괜찮다. 메모의 정리는 다른 서비스에서 하지만, 그 안에 들어갈 일부 내용을 윔지컬에서 만드는 식이다. 메모뿐만 아니라 콘텐츠나 상품 자료 등에 들어가는 시각 자료를 만들 때도 유용할 것이다.
윔지컬 페이지는 구글 문서처럼 다른 사람과 공유할 수 있다. 권한도 보기와 편집을 개별적으로 설정할 수 있다. 브레인스토밍을 할 때 마인드맵 페이지 하나를 열어놓고 모두를 초대해, 다 같이 아이디어 가지를 작성하는 것도 괜찮을 것이다.
보너스 팁: 어떤 페이지 형식이든 오른쪽 하단을 자세히 보면 시계처럼 생긴 아이콘이 보일 것이다. 'Time Machine'이라는 기능인데, 구글 문서에서 이력을 볼 수 있는 것처럼 해당 페이지의 이력을 볼 수 있다. 재밌는 점은 이력이 스냅샷 형태가 아닌 동영상으로 표현이 되어서, 앞뒤로 돌려보면서 해당 페이지가 어떤 식으로 업데이트되어 있는지 쭉 이어서 볼 수 있다. 복원하고 싶은 구간을 찾았으면 그 구간에서 멈춰서 'Restore' 버튼을 누르면 해당 버전으로 복구된다. 정말 직관적이어서 놀란 기능.
4. 요금제 살펴보기
윔지컬의 요금제는 월 12 달러(한화 약 1만 4200원)로 종류가 딱 하나뿐이다(1년 단위로 결제하면 월 10 달러). 유료 요금제의 혜택은 아이템 수 제한 없애기. 노션이 초기에 블록 개수 제한을 두었듯이, 윔지컬에는 아이템 제한이 있다. 여기서 아이템이란 폴더, 문서, 페이지, 페이지 내의 도형이나 아이콘, 문서 내의 단락, 코멘트 등으로 '쓰면 쓸수록 공간이 차는 시스템'이라고 할 수 있다. 무료 요금제에서는 아이템이 3,000개로 제한된다.
월 12 달러라는 금액은 계정 당 금액이 아니라 워크스페이스 당 금액이다. 따라서 여러 개의 워크스페이스를 사용한다면 금액을 워크스페이스 별로 따로 결제해야 한다. 물론 워크스페이스의 일부는 유료, 일부는 무료 같은 식으로 쓸 수 있지만, 그래도 좀 비싸다는 느낌이 든다. 노션의 워크스페이스 당 가격은 (개인 사용자의 경우) 월 4 달러(한화 약 4700원)인데, 윔지컬의 월 12 달러는 부담스럽다.
보너스 팁: 아이템 개수는 3,000개로 제한되지만, 워크스페이스를 몇 개까지 만들 수 있는지에 대한 제한은 없다. 때문에 기존 워크스페이스 내에서 아이템이 3,000개 다 찼으면 새 워크스페이스를 만들어 작업하는 식으로 우회할 수 있다.
5. 아쉬운 점
가장 치명적인 단점으로 특정 형식에서 한글 입력이 매끄럽지 못하다. 문서나 포스트잇 메모에서는 잘 입력되는데, 마인드맵에서는 쓰다 보면 한 글자씩 빠진다. 마치 (해외 서비스를 사용하는 한국인의 통과의례처럼 느껴진다. 혹시 해서 윔지컬 커뮤니티를 둘러보니 역시 한국어/일본어/중국어 등 외국어 글자의 입력이 그다지 매끄럽지 않은 것으로 보인다.
또한 윔지컬은 가벼움을 추구하다 보니, 더 전문적인 작업을 위해서는 결국 다른 툴을 써야 한다. 와이어프레임은 피그마, 마인드맵은 마이든마이스터(MindMeister), 문서는 노션 등 훨씬 강력한 툴이 있는 상황에서 윔지컬 하나로 해결하기에는 부족하다. 가볍게 쓸 사람에게는 더할 나위 없이 좋지만, 어떤 사람들에겐 애매하게 다가올 수 있다.
그래서 요금제가 비싸게 느껴진다. 써보면 정말 잘 만들었다는 느낌을 받지만, 다른 툴을 대체할 정도의 강력함을 제공하지는 않기 때문에 개인적으로 유료로 사용할 생각은 들지 않았다. 3~4달러라면 모를까, 10달러가 넘는 금액은 다른 툴을 계속 써야 하는 상황에서는 꽤 부담스럽게 다가온다.
결론: 보조로 쓰기에 정말 훌륭한 툴
머릿속에 있는 아이디어를 다른 사람에게 전달하는 것은 늘 힘들다. 우리는 각자 다른 식으로 생각하고 이해하기 때문에, 윔지컬 같은 디자인 커뮤니케이션 툴을 사용하는 것은 큰 도움이 된다. 윔지컬은 딱 적당한 정도의 자유도를 주기 때문에 간단하게 쓰기에 정말 좋다.
현재로서는 무료로 사용하면서 노션에 끼워 넣거나 파일로 내보내는 정도로만 사용하고 있다. UI 반응속도가 워낙 좋고 디자인이 깔끔해 메인 툴로 사용하고 싶지만 그러기에는 아직 기능이 부족하다. 그러나 쓰다 보면 계속 쓰고 싶어지는 툴이기에, 앞으로 어떤 식으로 발전할지 관심을 갖고 지켜볼 생각이다.
*글에 사용된 이미지는 윔지컬 공식 홈페이지와 서비스에서 직접 캡처하고 편집한 것입니다.
*본 내용은 요즘IT와 함께 작성한 글입니다.
