왜 이슈 트래킹 서비스 Linear는 깨끗해 보일까?
다른 이슈 트래킹 도구보다 깨끗한 Linear의 첫인상과 아쉬웠던 점
이 글은 SaaS Design을 스터디하는 그룹 세션에서 Linear라는 이슈 트래킹 툴을 각자 리서치하며 쓴 글입니다. 다크 모드가 아닌 라이트 모드를 기준으로 리서치했습니다.
첫인상
Linear를 처음 접했을 땐 매우 깨끗하고 정돈된 인상을 받았다.
웹사이트뿐만 아니라 제품에서 보이는 모습도 군더더기 없다는 생각이 들었다. 몇 번 마우스를 움직여보니 hover 액션과 우클릭, 단축키 액션이 잘 지원되기 때문에 꽤 고도화된 제품처럼 편하게 느껴진다는 걸 금방 알 수 있었고, 그만큼 가볍게 쓸 수 있으니 서비스를 사용할 때 느끼는 부담감이 적었다.
그런데 정말 이슈 트래킹을 해보려니 불편하다는 느낌이 생겼다.
온보딩/튜토리얼 과정이 그래픽보다는 페이지별 영어 텍스트 위주로 되어있는데, 습관적으로 창을 다 꺼버리고 나니 프로덕트를 제대로 이해하지 못하고 리서치를 시작할 수밖에 없었다. 이 점 때문에 영어권 외 유저들에겐 불친절한 프로덕트라는 생각까지 들었다. 스터디 그룹 안에서도 온보딩 과정이 매끄럽지 않다는 의견이 나왔다.
게다가 정말로 이슈 카드를 관리해보니 시각적 위계의 약점이 드러났다.
이런 첫인상 때문에 나 나름대로 Linear 제품이 깨끗한 인상을 줄 수 있었던 이유와 온보딩/학습이 용이하지 않았던 시각적 이유를 찾아보며 이 제품을 리서치해봤다.
✨ 깨끗한 인상을 주는 이유
1️⃣ 잘 정리된 Grayscale 컬러
① Side Menu (LNB)
이미지에서 볼 수 있다시피, 왼쪽 사이드 메뉴가 Jira/Asana와는 달리 흰색 배경이다.
사용자가 주로 볼 오른쪽 뷰보다 눈에 덜 띌 수 있는 방법을 택했으며, 다른 이슈 트래킹 툴보다 훨씬 깨끗한 인상을 만들어 주는 데 이 부분이 일조하고 있다. 왼쪽 뷰와 오른쪽 뷰의 컬러, 타이포그래피 등이 달라질 필요가 없으니 통일성 있고 더 정돈되어 있는 인상도 줄 수 있다.
다만 정말 좋은 선택이었는지는 의문이다. 첫인상은 깨끗하고 유려해 보이지만, 실제로 사용할 때는 Jira, Asana처럼 왼쪽 사이드 메뉴 배경이 다른 색이어서 오른쪽 화면과 뎁스 차이가 나는 디자인이 훨씬 편하고 좋다고 생각한다. 특히 Linear의 다크 모드를 보면 그 불편함이 더 크게 느껴진다.
② Color (라이트 모드 기준)
전체적으로 Cool Gray 계열을 선택했기 때문에 가볍고 시원한 느낌을 주고 있다.
Linear의 Primary 컬러는 푸른 보라색인데, 밝은 회색일수록 보라색에 가까운 푸른색을 띤다.
2️⃣ 숨겨진 메뉴들
Linear가 깨끗한 외관을 유지할 수 있는 이유는 자잘한 설정을 모두 숨겨놓았기 때문이다. (시각적으로든, 위계적으로든) Hover나 클릭하면 나오는 툴팁, 메뉴, 모달 창 중 액션이 가볍고 무거운 정도에 따라 그림자 설정이 다르게 되어있다. 1번이 가장 가볍고 3번이 가장 무겁다.
① Tool Tip
툴팁이 정말 아쉬운데 그림자까진 아니더라도 아사나처럼 진하게 디자인되었다면 참 좋았을 것 같다.
프로덕트가 전체적으로 화이트 톤인데, 툴팁은 흰 배경에 옅은 회색 선만 그어놔서 눈에 잘 띄지 않고 뒤에 깔리는 콘텐츠와 엉켜서 더 어지러워 보인다.
② Menu
메뉴 중에서도 인상 깊었던 건 사진 3장 중 가장 오른쪽의 필터인데, 선택 UI 중 무려 4가지가 함께 있는 디자인이다.
1. 레이아웃 뷰 전환 (리스트/칸반 보드)
2. 드롭다운 셀렉트
3. 토글스위치
4. 토글 토큰
토글스위치를 제외한 모든 요소를 버튼 디자인처럼 풀어냈기 때문에 가능했던 통일성이겠다. 최근 모바일/웹 구분 없이 다양한 서비스에서 많은 요소를 이렇게 버튼처럼 풀어내는 경향이 있던데, 정확히 어디에서 영향을 받은 방식인지 알고 싶다.
③ Modal
왼쪽 상단부터 이슈 생성, 라벨 컬러 선택, 마감기한 수정, 뷰 옵션 퍼블리시다. 왼쪽 사이드 메뉴를 통해서 오른쪽 뷰에 뜰 페이지를 바꾸고, 오른쪽 페이지 안에서 생성/수정/삭제 등의 액션을 할 때는 주로 ②Menu나 ③ Modal을 사용한다. 메뉴로 하는 자잘한 액션/설정보다 좀 더 많은 액션을 담아야 하고, 중요하게 보일 필요가 있지만 풀 페이지로 넘어갈 정도로 무겁지 않은 건 Modal로 풀어냈다.
Linear는 워크스페이스/팀 설정 페이지를 제외하고는 흔히 말하는 CTA 버튼(제품 Primary 컬러가 꽉 채워진, 전형적인 버튼 모양)이 많이 드러나지 않는데, 아마 철저히 의도된 것일 테다. 이런 점이 더 깔끔한 인상을 함께 만들어준다.
아쉬운 시각 요소 활용
칸반 보드 뷰에서는 그나마 Status별로 칸이 아예 나뉘어있기 때문에 조금 나은 편이지만, 나는 리스트 뷰가 아쉽다. 상태와 우선순위 아이콘, Chip, 날짜 표기가 과연 적절했을까 고민되어서 한 번 훑어봤다.
1️⃣ Icons 아이콘
Linear의 ‘의견을 주장하는 서비스’ 철학은 좋지만, 혹시 Linear 안에서만 통용되는 아이콘 디자인은 아니었을까? 이게 사용자들이 익숙해지는 데 더 힘든 이유가 되지는 않을까?
아이콘 디자인만 놓고 보자면 Jira, Asana보다 추상적인(= 설명적이지 않은) 경향이 보인다.
이런 디자인은 숨겨진 Menu 내 아이콘보다는, Status(Issue, Cycle)에서 두드러진다. 스터디 그룹원끼리 Linear가 예쁘긴 하지만 아직 불편하다는 의견이 나온 데 이런 디테일이 일조하지 않았나 싶다.
① Workflow
(Backlog, Todo, In Progress, Done, Canceled)
이슈의 진행 상태(Status)를 나타내는 아이콘을 살펴보았다.
Notion에서는 태그 값을 텍스트 Chip으로 관리하기 때문에 컬러, 텍스트 2가지 지표만 사용 가능하다.
Linear에서는 아이콘이 기본 설정되어 있기 때문에 아이콘, 컬러, 텍스트 3가지 지표로 구분할 수 있어 좋은 포인트라고 생각했다.
그러나 Linear에서 기본으로 제공하는 상태 아이콘이 적절한지는 물음표다. Workflow뿐만 아니라 Priority 아이콘에도 해당된다. 아이콘 디자인을 하나하나 뜯어보면 말이 안 되는 건 아니다. 그런데 리스트로 모든 요소를 한꺼번에 봤을 때는 한눈에 상태를 파악하기에 불편하다.
이 아이콘들은 어느 화면이든 매우 작게 보일 수밖에 없는데, Backlog–Todo의 아이콘이 굉장히 비슷하게 생겼다. 그래서 회색도가 비슷해지고 결국 한눈에 구별하기 힘들 때가 많았다.
Done 아이콘의 컬러는 Linear 프로덕트의 프라이머리 색상을 썼는데, 파란색이나 초록색 계열이 훨씬 Complete의 느낌을 전달하기에 쉽지 않았을까 싶기도 하다.
그래도 제품 내 컬러가 많이 쓰이지 않았으니 Primary 컬러를 채우는 방식이 효과 있어 보인다.
② Priority
이슈의 우선순위를 나타내는 아이콘을 살펴보았다.
No priority와 Urgent보다는 High, Medium, Low의 위계가 작은 아이콘으로 판별하기 힘들 정도로 비슷하게 생겼다.
통신 상태에 빗대어 표현한 아이콘이지만, 우선순위 아이콘에 적절한 선택이었을지는 잘 모르겠다.
또 1칸 또는 2칸만 채워진 Low와 Medium 아이콘이 3칸이 모두 꽉 채워진 High 아이콘과 충분히 구별되지 않는 것이, 리스트 뷰에서 봤을 때 무엇부터 봐야 할지 잘 모르게 하는 가장 큰 원인이 아닐까 싶다.
③ Project Icons
기본으로 제공하는 컬러는 14개다. [#] 버튼을 누르면 HEX 코드를 직접 입력해서 커스텀할 수도 있다.
프로젝트별 아이콘은 커스텀 자유도를 높인 게 좋은 선택이라고 생각한다.
그래서 몇 번 지정하면 끝나는 프로젝트별 아이콘보단, 이슈 관리하면서 가장 자주 보고 사용할 Status 아이콘이 더 아쉽다.
2️⃣ Labels
Linear의 리스트뷰에서 캡처한 1개의 이슈Linear에서 Label은 모두 Chip 형태로 디자인되어 있는데, 리스트 뷰에서 혼란을 더하는 가장 큰 역할을 하고 있는 것 같다. Bug, Feature 같은 속성뿐만 아니라, 소속된 프로젝트와 사이클까지 같은 Chip으로 나열되어 보여서 위계 구분이 잘 되지 않는 것이 그 이유다.
게다가 Filled 디자인으로 컬러가 채워진 Chip이 아니라, 프로젝트/사이클 Chip과 비슷하게 보이려고 일부러 컬러 Chip을 따로 조그맣게 만든, Outlined 디자인된 Chip이기 때문에 여러 이슈를 한꺼번에 볼 때 식별이 더 어려워진다.
① 기본 제공되는 컬러
가장 기본으로 제공되는 건 4가지로 Bug, Improvement, Features, Reference다.
나머지는 새로운 Label을 추가하고 싶을 때 선택할 수 있는 컬러들이다. 물론 프로젝트 아이콘 컬러처럼 HEX 코드를 직접 입력해서 커스텀할 수도 있지만, Label을 추가할 땐 16개의 HEX 코드 추천이 나와서 함께 컬러칩으로 뽑아보았다.
② Chip 디자인
얼마나 예쁜 컬러를 골랐든, 실제로 사용할 땐 이렇게 작은 원으로만 봐야 한다. 게다가 프로젝트, 사이클 Chip과 너무 비슷해서 더 분간하기 힘들다.
깨끗한 인상은 참 좋았지만, 실제로 사용할 때 가장 크게 불편했던 부분이다. 화면을 보고 있긴 한데... 뭐부터 봐야 할지 모르겠는 그런 느낌? 멍 때리게 되는 그런 느낌?!
차라리 Notion, Asana처럼 컬러를 채우는 방식을 택했다면 어땠을까 싶다. 또 반대로 Label의 Chip 디자인은 Outlined로 유지하면서, 프로젝트나 사이클 Chip을 Filled로 변경해도 위계를 더 명확히 보여주는 데 도움이 될 수도 있었겠다. 물론 다른 요소들도 그에 따라서 어울리게 수정해야겠지만. (말이 쉬운 거겠지...)
3️⃣ Date
내가 이해할 수 없었던 것이 있다. 날짜 표기 방식인데, 왼쪽 이미지의 날짜 두 개는 Created(이슈 생성), Updated(이슈 최근 업데이트) Date다...
아직 이슈 트래킹 툴을 따로 써본 적은 없지만, 보통 Due Date(마감일)가 가장 중요하지 않나?...
Due Date를 설정한 카드는 저렇게 캘린더 아이콘이 하나 띡 뜨는데(대체 왜지...?), 리스트에서 날짜 표기되는 부분은 차라리 Created(생성일) – Due Date(마감일) / Updated Date(마지막 업데이트일) 이렇게 표기했다면 훨씬 이슈를 한눈에 파악하기 쉬웠을 것 같다.
마치며
어쩌다 보니 Linear의 단점만 엄청 부각된 것 같은데, 이슈 트래킹 툴처럼 시각 요소가 많을 수밖에 없는 프로덕트는 이렇게 룩앤필을 조화롭게 맞추기가 굉장히 까다로울 거다. (이렇게 글을 쓴 나도 엄청 부족하다...) 그런 면에서 Linear는 "그렇게 어려운 걸 우리가 해냈습니다!"라고 스스로 자랑할만한 프로덕트라고 생각한다.
Linear 제품 개발팀의 철학이 담긴 글도 있으니 궁금하신 분은 훑어보시길 바란다.
SaaS Design Research 팀의 글
1. 이슈 트래킹 시스템 탈탈 털기 — ITS 정의부터 Jira vs Asana vs Linear 비교까지 (링크)
2. Linear — 이슈 트래킹 시스템의 위계 구조는 어떻게 설계되어야 할까? (링크)
3. 왜 이슈 트래킹 서비스 Linear는 깨끗해 보일까?
4. Jira vs Linear, Jira 사용법에 대해 조금 더 알아볼까? (링크)
