디자인 업무를 자동화하는 픽셀릭(Pixelic)리뷰
디자인 협업 툴 리뷰
(위 링크에서 픽셀릭 블로그에 게시된 영문글을 확인할 수 있습니다.)
우리 팀에서 지난 며칠 동안 디자인 협업 도구인 픽셀릭(Pixelic)을 사용해봤다.
픽셀릭은 화면 기반의 소통에 집중된 협업 도구로 업무 자동화, 다른 도구와의 유기적 연동, 간편한 테스크 관리 등의 기능을 제공하는 도구이다.
나는 우리 팀의 최근 프로젝트들을 픽셀릭을 활용해서 한 번 이상의 이터레이션을 경험해보고, 나를 포함한 우리 팀이 픽셀릭을 사용하는 모습을 관찰했다. 짧은 경험이긴 하지만 픽셀릭이 가진 편리함에 대해 기록해보기로 했다.
이 글의 내용은 아래 세가지 주제에 대해 다루고 있다. 픽셀릭에 대해 궁금하거나 도입을 고민하고 있는 디자이너가 읽으면 좋을 것 같다.
1. 픽셀릭을 활용하는 순간
2. 픽셀릭을 통한 백로그 이슈의 히스토리 추적
3. 화면을 통해 공유하고 이해하는 것의 효율성
1. 픽셀릭을 활용하는 순간
위 이미지는 내가 현재 속한 팀에서 최근 프로젝트를 진행하며 픽셀릭을 사용한 순간을 보여주고 있다.
이미지에서 노란 면으로 표시된 부분을 보면 픽셀릭이 초기 기획 및 아이데이션과 논의 단계, 그리고 QA 단계 등에서 사용된 것을 확인할 수 있다.
픽셀릭이 아직 부족한 점
위 이미지를 보면 전체 프로세스 중 특정 시점들에만 사용되었는데, 픽셀릭을 아직 오래 사용해보지 않아서 많이 확장하기 어려웠고, 기능적인 차이로 다른 도구를 대체하기 어려운 시점도 있었기 때문이었다. (픽셀릭 팀에 따르면, 제품이 커버할 수 있는 영역을 꾸준히 늘리고 있다고 한다.)
예를 들면 이터레이션의 첫 단계인 ‘이해’ 단계에서는 팀원들 간에 리서치 자료와 데이터를 해석하기 위한 문서들과 회의가 오간다. 그리고 정책 정의 단계에서는 지라(Jira)+컨플루언스(Confluence) 또는 노션(Notion) 등의 도구를 이용한 다큐멘테이션 기능이 필요하다. 개발팀과 정확한 화면 정보 및 UX 스펙을 공유하기 위해서는 제플린(Zeplin)처럼 화면 가이드를 확인할 수 있어야 한다.
이러한 단계들에서 이미 사용하고 있는 다른 도구를 대체하는 것은 쉽지 않은 일이었다.
하지만 픽셀릭을 도입하고 난 뒤에 아이데이션과 토론 단계에서는 물론이고 생각지 못한 순간에도 유용함을 확인할 수 있었는데, 그건 바로 QA단계였다.
픽셀릭을 사용하기 전의 기존 QA 단계에서는 아래의 예시 이미지처럼 다른 팀원을 이해시키기 위한 많은 정보를 직접 입력하고, 가이드 화면을 캡쳐해서 붙여 넣는 방식으로 귀찮고 불편하게 검수 내용을 등록해야 했다.
지난날의 귀찮음
그런데 픽셀릭을 팀에 소개하자 개발자가 이것을 아이디어 보드에서 QA 피드백의 장으로 자연스럽게 확장하여 사용했는데, 실제 구현된 화면 또는 가이드 화면에서 캡처해와서 이슈로 등록하던 지난날의 귀찮음이 한 번에 사라지는 순간이었다.
2. 오, 백로그 이슈의 히스토리를 추적할 수 있다니…
과거 다른 스타트업에 있었을 때 나는 최적의 프로세스를 정립하기 위해 다양한 접근을 시도하는 과도기적인 시기를 겪은 적이 있었다. 당시에는 진행 중인 프로젝트 상황에 맞게 전혀 다른 프로세스로 업무를 진행하곤 했는데, 그러다 보니 비효율과 시행착오를 겪기도 했다.
예를 들면 이런 상황이었다.
1. 팀원 A와 함께 메신저 챗을 통해 수정 사항 논의 및 정의
2. 칸반 보드에 위 백로그 이슈(task) 추가
3. 해당 이슈의 맥락을 이해하지 못한 팀원 B가 태스크가 생겨난 배경에 대한 이해를 요구 (히스토리)
4. 팀원 B에게 해당 이슈에 대한 대화 내용 및 설명 전달
이 상황에서는 태스크 추가의 불편함과 결정 사항에 대한 히스토리 누락으로 인해 불필요한 리소스가 추가되는 문제가 있었다. 픽셀릭은 이런 비효율을 해결하기에 적합했다.
해결1. 태스크 추가 자동화
장시간에 걸친 회의를 하다말고 잊기 전에 회의록을 작성하는 것은 누군가는 해야 할 일이다. 하지만 회의록을 작성하다보면, 회의의 흐름이 잠시 끊기는 불편함을 만들기도 한다. 게다가 회의를 하며 자연스레 발생하는 할 일 (action item)을 어디엔가 등록하고 그것에 대한 맥락과 배경 (히스토리)을 적는 일은 생각보다 어려운 일이다.
하지만 픽셀릭에서는 “taskify” 버튼 클릭 한번이면 된다. 대화를 하는 중에도 그 대화를 그대로 백로그에 넣을 수 있으니 “context switching” 비용이 들지 않는다. 맥락을 바꿀 필요 없이 그대로 할 일로 전환이 가능하다.
(좌)픽셀릭의 편리한 태스크 추가 / (우)실제 픽셀릭 Taskify 모습
기존에 팀들이 사용하는 방식은 아래 이미지처럼 먼저 메신저(eg., Slack)에서 대화하고 칸반 보드(eg., Notion)에 태스크를 추가하거나 자신의 노트에 기록한 뒤, 다시 메신저로 돌아와 계속해서 회의를 진행해야 했는데 픽셀릭의 “taskify” 기능이 이 과정을 자동화했다.
기존 방식의 비효율 — 이슈 추가의 불편함
기존의 방식이 익숙함으로 인해 불편하다는 것을 느끼지 못했다. 여러 도구를 오가지 않고 “taskify” 한 번으로 이슈를 태스크로 등록하는 픽셀릭의 워크플로우를 경험하고 나면 기존의 방식이 얼마나 귀찮았는지 새삼 느끼게 된다.
게다가 아래 이미지의 Area 3처럼 산재된 대화라도 Area 1에서 디자인 이미지의 버전(Change History) 별로 분리되고, Area 3에 보이는 대화에서 taskify 버튼을 눌러 칸반 보드에 이슈가 즉시 등록되어 각 이슈를 잊지 않고 쌓을 수 있다.
해결 2. 태스크와 히스토리의 양방향 연결
픽셀릭의 칸반 보드에서 등록된 태스크로부터 원래의 대화로 돌아갈 수 있어 공유하는 사람의 수고 없이 정보가 필요한 누구든 직접 볼 수 있다.
아래 이미지처럼, 대화에서 “taskify”라는 버튼을 누르면 그 버튼이 “Go to Task” 버튼으로 바뀌고, 그걸 누르면 해당 태스크가 등록된 칸반 보드로 이동할 수 있다. 칸반 보드에서도 “Go to comment” 버튼을 누르면 원래의 대화 히스토리를 확인할 수 있다.
상황에 따라 이슈나 태스크를 결정한 관계자가 누구인지, 어떤 히스토리로 그 사항을 결정했는지 자세한 맥락 정보가 필요한 순간이 있다.
이를 위해 모든 결정사항이나 이슈마다 대화했던 메신저의 내용을 해당 태스크 카드(또는 티켓)에 붙여 넣는 것도, 결정 관계자가 누구인지 태그 하는 것도 번거롭다. 심지어 그런 모든 정보를 필요로 하는 사람이 있을지, 없을지도 확실하지 않다.
픽셀릭에서 제공하는 방식은 태스크를 등록하는 사람과 확인하는 사람 모두의 불필요한 리소스가 줄이고 다른 팀원을 번거롭게 하는 미안함 없이 스스로 문제를 해결할 수 있도록 도와준다.
3. 공유된 이해를 실현하는 화면의 중요성
“공유된 이해(shared understanding)”라는 표현은 공유자가 무엇을 생각하고 왜 그렇게 생각하는지 모두가 이해했다는 뜻이다.
“홈 화면에서 바로 회원가입을 할 수 있게 하면 어떨까요?”
예를 들어 누군가 이런 아이디어를 던졌을 때, 홈 화면에 회원가입이 존재하는 수많은 방식 중 동일한 화면을 생각하는 사람이 회의 자리에 몇이나 될까?
좀 더 구체적인 시각 단서를 더해주면 그나마 낫다.
“홈 화면의 첫 번째 섹션의 높이를 현재보다 160px 정도 늘리고 그 섹션 전체의 3분의 1 정도 영역에 회원가입 필수 입력 정보를 입력하는 인풋 박스들과 버튼을 제공하면 좋을 것 같아요.”
하지만 이렇게 말해도 다들 머릿속에서 그려진 그림은 같지 않을뿐더러, 이러한 시각 정보가 있어도 쉽게 화면을 상상하지 못하는 사람들도 많다. 모두가 디자이너처럼 시각적인 대화를 자주 하지도 않고 비율에 대한 감을 잡기도 어렵다. 화면 없이 소통하는 것은 비효율적인 방식이다.
“아.. 제가 그때 이해한 것은 이런 게 아닌데…”
위와 같은 말로 다시 처음 단계로 돌아가지 않으려면 초기 아이데이션 과정에서의 ‘공유된 이해’가 반드시 필요하다.
실패와 시간 낭비를 최소화하면서 다른 팀원들과 같은 방향으로 나아가야 하는 디자이너에게 공유된 이해를 실현하는 일은 그의 역량으로 이어지는 중요한 문제이다.
여기에 시각적인 표현이 도움이 된다. 시각적인 커뮤니케이션은 말하는 사람의 시간뿐만 아니라 그것을 받아들이는 사람의 시간까지도 단축시켜준다. 실제로 인간의 뇌는 텍스트보다 이미지를 약 60,000배 더 빠르게 처리한다는 연구 결과도 있다.
결론적으로는 이런 시각 기반의 소통은 매우 효과적인데, 픽셀릭은 그것에 집중된 도구이다.
화면을 통해 공유하고 소통하는 픽셀릭의 모습 예시 — Figma에서 frame을 연동해 특정 frame을 놓고 그 위에서 협업하는 모습
이런 픽셀릭의 성격은 원격 상황에서도 유용하게 느껴졌다.
오프라인 회의를 진행하면서 ‘이 버튼’을 손가락으로 가리키며 이야기할 수 있지만 온라인은 그렇게 쉽지 않다. 코로나바이러스로 인해 이미 줌(Zoom)이나 구글 미팅(Google Meet) 등을 활용한 화상회의나 혹은 슬랙(Slack)에서 캡처 이미지나 링크를 주고받으며 소통하는 일은 이제 일상이 됐다. 우리 팀에서는 몇 마디로 끝나는 간단한 대화에 화상, 화면 공유 회의 없이 메시지로 남기길 바랬기 때문에 픽셀릭이 좋은 대안이 될 수 있을 것 같다.
마치며
우리 팀에서는 아직 2주 정도의 짧은 기간 동안만 픽셀릭을 사용해봤으므로 심화된 활용은 아직 경험하지 못한 상태라는 점을 감안하고 읽어주길 바란다. 당연히 이런 생산성 도구는 사용한 기간과 빈도, 사용자의 전문성 등에 따라 활용 방식과 효율성이 천차만별로 달라질 수 있다.
회사의 입장에서 너무 다양한 도구를 도입하는 일은 부담스러운 일이다. 그럼에도 불구하고 도구를 최소화할 수 있거나 기존의 도구들이 갖지 못한 매우 뚜렷한 장점이 있다면 새롭게 학습해야하는 불편함을 감수하더라도 도입할 것이다.
픽셀릭은 화면 기반의 소통에 집중된 구조, 다른 도구와의 유기적 연결, 간편한 테스크 관리라는 세가지 뚜렷한 장점이 있고 학습이 어렵지 않아 팀에 쉽게 도입할 수 있었다.
아직은 픽셀릭으로 피그마, 슬랙, 노션, 지라, 제플린과 같은 강한 의존성을 느끼거나, 그런 도구를 대체하거나, 프로세스의 전체 과정에서의 활용하지는 못했다.
또 사용자의 입장에서 픽셀릭에게 요구하고 싶은 안정화, 모바일 환경 최적화, 다양한 기능 지원, 속도 개선 등 많은 부분도 있다.
픽셀릭이 계속해서 향상된 기능으로 새로운 버전을 배포하는 속도를 지켜봤을 때 빠르게 보완해 줄 것이라 생각한다. 다른 도구를 대체할 수 있는 기능까지 지원해준다면 의존도가 더욱 높아질 수 있을 것이다.
최적의 도구를 최대로 활용할 수 있으면 그게 오늘날 장인의 모습이다. 픽셀릭이 앞으로 발전해서 디자이너 뿐만 아니라 소프트웨어를 만드는 모든 팀 구성원들에게 최적의 도구가 될 수 있기를 기대한다.
author : ohjieun8018@gmail.com
미디엄 글을 브런치로 옮기는 중입니다. (미디엄 링크 첨부)
