생산성을 높이는 터치바 커스터마이징
맥북프로 터치바의 34가지 노하우
맥북프로 터치바, 제대로 사용하고 계신가요? F1~F12키를 누르는 데 한 단계가 더 생기고, esc는 누르는 느낌도 없어서 불편하다는 평이 많죠. 주변에서 터치바를 잘 쓰는 사람을 찾아보기는 힘들고, 잘 쓰이지도 않는데 괜히 넣어서 돈만 비싸게 받는 것 아닌가 하는 의심도 드실 겁니다. 그러나 저는 맥을 고집하는 3가지 이유로 심플한 디자인과 편리한 마이그레이션 기능, 그리고 터치바를 이야기합니다.
사용자 설정이 가능한 컨트롤 스트립아시다시피 터치바에서는 화면 밝기, 미션 컨트롤, 스팟라이트, 재생, 볼륨, 시리, 방해금지, 스크린샷 등의 다양한 기능들 중 자신이 선호하는 기능들을 원하는 순서로 배치할 수 있습니다. 앱 영역에는 자신이 자주 사용하는 어플리케이션들을 배치할 수 있죠. 이 글에서 터치바의 기본적인 기능들에 대해서는 따로 이야기하지 않습니다. 혹시 기본적인 터치바 가이드가 필요하시다면 애플에서 공식 제공하는 터치바 사용법을 참고하세요.
물론 이런 '컨트롤 스트립 및 앱 영역의 사용자화' 이외에도 특정 어플리케이션을 실행할 때에는 해당 앱에 맞는 기능 구성이 나타난다는 것도 큰 장점입니다. 물론 해당 영역의 전문가라면 단축키에 익숙해져 있겠지만, 누구나 숙련도가 있는 것은 아니고, 또 전문가에게도 쓸모있는 기능들은 있는 법이니까요.
프로그래밍, 디자인, 영상 편집 등의 작업에 특히 유용한 터치바 예시그래서, 네가 말하는 터치바의 쓸모가 뭔데?
기본 터치바 : Frequency App + Major Strip
제 맥북프로 레티나 터치바의 기본 구성은 상단 이미지와 같이 생겼습니다. 자주 쓰는 기능들과 어플리케이션들을 정리해놓았습니다. 의외로 평범하죠. 기본적인 터치바와 달라보이는 건 배터리 정보(충전 케이블 제거시 남은 시간이 0:00 형식으로 나타남) 정도일까요?
사진에는 빠졌지만 날씨 정보 아이콘도 있는데, 길게 눌렀을 때(Long Press)에는 위와 같이 일주일의 날씨 정보가 나타납니다. 또 기본 터치바에도 있는 기능이지만 시간 정보를 길게 눌렀을 때에는 캘린더로 전환되죠. 마지막에 설명하겠지만 BTT(Better Touch Tool, 포스트 하단에 다운로드 링크 있음)이라는 생산성 툴 때문입니다. 터치바 뿐만 아니라 마우스, 트랙패드, 단축키 등의 다양한 커스터마이징을 오래전부터 지원해온 막강한 생산성 툴이죠. 유료이지만 지속적 사용 여부를 판단하기에는 충분히 긴, 45일이라는 긴 트라이얼 기간을 제공합니다.
저는 이 툴의 1)Remaining Battery Widget, 2)Weather Widget, 3)Calendar Widget 등을 기본 터치바 화면에 적용하고 있습니다. 저는 사용하지 않지만, 현재 재생중인 곡의 정보를 보여주는 4)'Now Playing Action'도 BTT 유저분들이 가장 애용하는 액션 중의 하나입니다.
처음부터 새로 짜기에는 어려운 지점들이 있어, BTT의 요소들로 새로운 UI를 짜놓은 GoldenChaos 프리셋(포스트 하단에 다운로드 링크 있음)을 다운로드 받아 커스터마이징했습니다. BTT를 활용하면 컨트롤 스트립에 5)액션을 4개 이상 배치할 수 있고, 우측만이 아니라 6)좌측과 중앙에도 컨트롤 스트립 액션을 배치할 수 있습니다. 7)아이콘의 디자인을 자유롭게 꾸밀 수 있다는 것도 큰 장점이죠. 8)기본 터치바에서 가장 큰 불만이었던 키감도 진동으로 설정해 해결 가능합니다.
제가 기본 터치바 화면에서 가장 공들인 기능입니다. 슬랙, 웨일, 크롬, 노션, 포토샵, 카카오톡 등 가장 자주 사용하는 어플리케이션들을 컬러풀하게 등록해놓은 것이요? 아닙니다. 가장 왼쪽, 9)읽지 않은 중요 슬랙 메시지(DM이나 채널에서 태그된 메시지)의 개수를 보여주는 것이죠. 10)누르면 슬랙의 Threads로 이동합니다.
물론 터치바가 없더라도 기본적으로 화면의 dock에서 제공하는 기능입니다. 그러나 dock을 고정시켜놓아야 하고, 시각적으로 화려한 여러 요소들 사이에서 dock에 시선을 주고, 그 안에서 슬랙을 찾고 숫자를 읽어내는 것은 명백히 비효율적입니다. 검은 키보드 사이에서 빛나는 청록색 버튼을 터치하는 것만으로 슬랙 Threads에 접근할 수 있다는 것은, 많은 조직이 고민하는 슬랙 접근성(특히 커뮤니케이션 응답 속도)을 높이는 핵심적인 열쇠일 수 있겠습니다.
이외에도 11)아이메시지, 12)텔레그램, 13)트렐로, 14)디스코드, 15)트위터, 16)페이스북, 17)스카이프, 18)페이스타임의 Unread Message나 Mention을 슬랙과 같은 방식으로 터치바에 띄울 수 있습니다.
Command 터치바 : App Switcher
BTT에서는 19)Alt, Opt, Ctrl, Shift를 눌렀을 때 완전히 다른 터치바 UI를 구성할 수 있습니다. 위의 이미지는 저의 Alt 터치바 화면 구성입니다. 우선 우측의 시간 정보, 배터리 정보, 잠자기 모드 액션은 통일감 형성을 위해 그대로 가져갔습니다. 좌측에는 현재 사용중인 앱들만 보여주는 20)App Switcher Widget을 사용했습니다. 사용중인 앱이 많을 때는 탭 전환보다 터치가 더 편하더라고요. 특히 창은 닫혀있지만 실행중이어서 메모리를 잡아먹는 프로그램들을 종료해야 할 때 직관적으로 확인하기가 편하고, 또 21)'Quit' 버튼을 만들어서 불필요한 프로그램을 더 쉽게 종료시킬 수 있도록 했습니다.
Option 터치바 : Business Bookmark + Minor Strip
위의 이미지는 저의 Option 터치바 화면 구성입니다. 우측 컨트롤 스트립에는 기본 터치바 UI에 들어가지는 않았지만 비교적 자주 쓰는 액션들, 키보드 밝기와 스크린샷(화면 전체, 윈도우, 부분), 블루투스, 와이파이 액션을 담았습니다. 생산성과 관련하여 Opt 터치바에서 특별히 다루고 싶은 것은 좌측인데요.
22)실무에서 자주 이용하게 되는 페이지들을 터치바 버튼으로 만들었습니다. 저는 북마크를 통해 업무와 관련한 모든 페이지들을 비교적 깔끔하게 분류해놓는 편입니다. 그러나 폴더의 위계가 하나 생길 때마다 접근성이 떨어지고, 북마크 바 전면에 노출시켜놓아도 직관적으로 구분하기가 힘듭니다. 브라우저가 닫혀 있을 때는 먼저 브라우저를 열고, 또 페이지를 찾아들어가야한다는 수고로움이 있죠.
저는 2개의 일을 하고 있어서 '|'를 통해 양쪽을 구분하고, 아이콘 하단에 브랜드 로고를 넣어서 기본 터치바나 다른 터치바의 아이콘과 헷갈리지 않도록 UI를 만들었습니다. 좌측 이미지에 보이는 아이콘들은 각각 업무관리, 자사 마켓 시스템의 관리자 페이지, 사내 CRM 솔루션, 배송관리 시트, 복리후생(복지❤️) 시트로 연결됩니다. 우측은 페이스북의 브랜드 채널 페이지, 브랜드 홈페이지, 지메일로 이동하죠.
사진에서는 잘렸지만 전체 UI에서는 네이버 메일웍스(사내 메일)와 구글 캘린더(사내 캘린더)로도 연결되어 있는 것을 볼 수 있습니다. 일일히 브라우저를 켜고 북마크를 찾지 않아도, 주소를 치고 상위페이지로 들어가 클릭하며 들어가지 않아도, 어디서 뭘하고 있다가도 한 번에 접근할 수 있어서 업무의 생산성 증대를 빠르게 느낄 수 있습니다.
접근성 이외의 차이가 궁금하시나요? 위의 노션 아이콘을 눌렀을 때에는 단순히 노션을 실행시키는 것이 아니라, 노션 안에서 회사 채널로, 채널 안에서도 특정 페이지로 이동합니다. 실무와 터치바의 연동은 단순히 특정 페이지 링크에 대한 접근성 향상만이 아니라 업무 자동화에 대한 가능성까지 일정 부분 포함하고 있습니다.
Control 터치바 : Split View + Special Action
Control 터치바는 다른 터치바들보다 심플합니다. 터치바를 편리하게 사용하기 위해서는 각 터치바의 컨셉이 명확해야 하고, 어떤 기능이 필요할 때 그게 Opt(Option) 터치바에 있었는지 Ctrl(Control) 터치바에 있었는지 고민하면 접근성이 떨어집니다. 저의 경우 기본 터치바의 컨셉이 자주 사용하는 앱+컨트롤 스트립이고, Cmd 터치바는 App Switcher, Opt 터치바의 컨셉은 북마크+2순위 컨트롤 스트립입니다. 그리고 Ctrl 터치바의 컨셉은 Split view+Special Action이죠.
매번 화면 상단의 초록색 버튼을 통해 스플릿뷰를 만들어왔다면, Mac에서도 23)단축키를 통해 스플릿뷰를 만들 수 있습니다. 저는 자주 쓰는 스플릿뷰(상하좌우)만 남겼지만, 원한다면 화면 1/3 단위의 상하좌우 영역, 4분할 영역으로 스플릿뷰를 만들 수도 있습니다.
제가 신경을 쓴 건 우측 4개의 버튼들입니다. 외관상으로는 각각 구글, 유튜브, 네이버 지도, 파파고 번역 페이지로 이동할 것 같습니다. 맞습니다. 해당 페이지로 이동합니다. 나만 해당 서비스의 메인 페이지가 아니라 검색 결과 페이지로 이동합니다. 해당 서비스의 메인 페이지로 이동하는 버튼들은 배경(Background)색을 화이트로, 해당 서비스와 관련된 기능들은 배경색을 그레이로 두어서 구분할 수 있도록 했습니다.
이미지는 뉴스 기사를 읽다가 궁금한 단어(예: 간편식)에 하이라이트를 걸고, 터치바의 유튜브 형태 단축키를 눌러서 '간편식이 검색된 검색결과 유튜브 화면'으로 다이렉트 이동하는 예시입니다. 24)영상 검색이 필요할 때는 유튜브, 25)텍스트나 사이트 검색이 필요할 때는 구글, 26)위치 검색이 필요할 때는 네이버 or 카카오 지도, 27)번역이 필요할 때는 크롬 번역 or 파파고의 결과 창으로 바로 이동할 수 있습니다. 28)확장 프로그램과 달리 브라우저에 종속되지 않기 때문에 E-book이나 PDF 자료를 검토하다가도 실행할 수 있습니다.
하단에 별도로 기술하겠지만, 저는 Ctrl 터치바에 특히 애착을 가지고 있습니다. 특정 페이지로 단순히 연결하는 것이 아니라 여러 단계의 절차가 필요한 복잡한 액션들을 자동화하고, 직관적인 아이콘으로 시각화해서 Ctrl 터치바에 하나씩 추가해나가려고 합니다.
Shift 터치바 : Slack DM + Channel
사내 인트라넷이 따로 없는 스타트업이라면 잔디나 슬랙을 주로 쓰시고 계실 겁니다. 저는 잔디도 쓰지만, 슬랙 이용 빈도가 훨씬 놓아서 시프트 터치바를 슬랙에 할애했습니다. 처음엔 계획이 없었는데 서칭을 하다가 실제로 구현되지는 않은, 멋진 Slack UI 아이디어를 드리블에서 보게 되었죠,
실제로 가능할까요? 결론적으로, 슬랙 창을 따로 켜지 않았거나 최소화해놓은 상태에서도 원하는 다이렉트 메시지(DM)와 채널에 다이렉트로 접근할 수 있도록 만드는 데 성공했습니다. 이미지처럼 세련되고 디테일한 기능들까지 구현해내지는 못했지만 더 많은 자원을 할애한다면 그도 가능할 것으로 보이고, 아마 그 전에 슬랙 자체에서 Touch Bar를 지원하지 않을까 기대해봅니다.
슬랙 워크스페이스의 멤버 수가 10명만 넘어가도 원하는 사람을 찾기 힘들고, 내가 사용하고 있는 슬랙 워크스페이스가 많을 때에는 채널 전환까지 신경 써야 하니 보통 일이 아니죠. 자주 DM을 주고 받게 되는 사람들을 Starred 해놓는 것보다 더 편하고 직관적으로 관리할 수 있다면 얼마나 좋을까요?
DM은 두 가지 방식으로 구현했습니다. 하나는 Dribble 프로젝트와 같은 방식으로 29)멤버들의 프로필 이미지 구현입니다. 동료들의 프라이버시 보호를 위해 따로 확대 이미지를 넣지는 않았지만, 시프트 터치바 전체 화면을 소개하는 첫 이미지를 보시면 같은 방식으로 구현된 것을 확인하실 수 있을 겁니다. 두 번째 방법은 30)동료들의 닉네임과 어울리는 일러스트를 배경색과 함께 배치하는 것입니다. 이 경우 공간을 많이 잡아먹는다는 단점은 있지만, 텍스트를 함께 넣기 때문에 인식이 더 편해진다는 장점이 있습니다. 배경색을 활용해 부서나 프로젝트 별로 다른 컬러를 가질 수도 있고요.
사진이냐 일러스트냐는 조직의 문화와 관련된 영역이기 때문에 어느 것이 낫다고 확실히 말할 수 없습니다. 그러나 그냥 이름만 클릭해서 접근했던 기존 Slack DM UI와 비교했을 때, 동료의 사진이나 일러스트를 확인하고 터치하는 것이 CFR, 그리고 더 친화적인 커뮤니케이션에 도움을 주는 것은 분명해보입니다.
우측에는 31)자주 사용하는 슬랙 채널들을 넣었습니다. 직무 관련 채널, 지출결의 채널, 그리고 general로 깔끔하게 구성했습니다. 너무 많아지면 접근성이 떨어지기 때문에 가장 자주 사용하는 채널 3~5개만 다루되, 워크스페이스별로 배경색을 다르게 가져가면 좋겠죠. 기왕이면 브랜드 컬러를 활용하는 편이 좋습니다. (저의 경우 사용하는 워크스페이스들의 브랜드 컬러가 같은 보라 계열이어서 임의로 청록색을 썼습니다.)
겉으로 보이지 않는 문제들
물론 현재의 터치바는 완벽하지 않습니다. 제 시스템 환경 설정 문제인지, BTT라는 소프트웨어 문제/한계인지 정확하지 않지만 몇 가지의 아쉬움이 있습니다.
Slack Mention Button : 눌렀을 때 Mention이 발생한 워크스페이스와 Channel/DM으로 이동하지는 않습니다. 내가 지정한 워크스페이스의 특정 Channel/DM으로 이동합니다. 문제라기보다 한계에 해당합니다. 저는 가장 자주 사용하는 워크스페이스의 Threads로 연결해두었습니다.
Slack & Notion Booting : 슬랙과 노션에 관한 터치바 버튼들은 대부분 BTT에서 기본적으로 제공하지 않고, 앱 내 단축키들을 연결해서 만들어야 합니다. 그런데 가령 슬랙이 꺼져있는 상태에서 누군가에 대한 DM 버튼을 누르면, 슬랙이 부팅되는 동안 DM 상대를 찾는 코드가 실행되어버려 해당 절차가 무효화됩니다. 이런 경우 DM 버튼을 한 번 더 눌러주어야 합니다. DM 버튼에 대해 Long Press를 설정하면 이런 문제는 해결할 수 있습니다.
Slack Focus : 반대로 슬랙이나 노션이 켜져있다면, 커서가 어느 지점에 있느냐에 따라 슬랙이나 노션 터치바 버튼이 먹히지 않을 수 있습니다. 그러나 이 역시 워크스페이스와 커서 포커스를 강제 이동시킴으로 해결할 수 있습니다.
Toggle : 개인적으로 가장 고민인 부분입니다. 터치바를 지원하는 어플리케이션을 사용할 때에는 BTT 터치바와 맥의 기본 터치바를 편하게 전환할 수 있어야 합니다. BTT의 Toggle 기능이 이런 부분을 담당하는데, BTT에서 기본 터치바로 전환할 때에는 잘 되지만 돌아오는 단계가 잘 먹히지 않습니다. BTT 재시작 기능을 F12 버튼에 단축키로 할당하여 우회적으로 문제를 해결했습니다만, 더 좋은 방법을 찾고 있습니다.
터치바, 이래도 안 쓸 건가요?
저는 맥북프로 2015년형 논터치바 모델을 오랫동안 써왔고, 터치바 모델로 전환한지 오래 되지 않았습니다. 새로운 맥북을 구입하는 과정에서 '터치바는 예쁜 쓰레기', '없어도 전혀 문제없는', '터치감도 없고 Fn키도 고정되지 않아서 오히려 불편한' 등의 악평을 많이 접했죠. 그런 말들에 흔들렸다면 어떻게 되었을까 생각만 해도 끔찍합니다. 저는 터치바가 조너선 아이브의 실수가 아니라 업적이고, 개인은 물론이고 조직의 생산성을 크게 올려줄 수 있는 기능이라고 생각합니다. 더 빠르고 효율적으로 일하고 싶어하고, 특히 조직 차원에서의 생산성을 중요하게 여기는 분들에게 참고할만한 레퍼런스가 되었으면 해서 해당 포스트를 작성하게 되었습니다.
단축키는 외워야 하지만, 터치바는 외울 필요가 없습니다. 시각적/직관적으로 나타내주니까요. 단축키에는 할당 한계가 있지만 터치바는 한계가 없습니다. 유사한 버튼들을 그룹핑하고, 상위 버튼을 눌렀을 때 그룹핑된 하위 버튼들로 구성된 터치바가 펼쳐지도록 위계를 만들 수 있습니다. 32)트리 구조를 이용하면 무한하게 확장할 수 있습니다.
터치바가 싸워야 하는 것은 단축키 자체가 아니라, 단축키가 무조건 편하다고 믿고 있는 사람들의 관념과 기존의 방식을 쉽게 바꾸고 싶어하지 않는 심리적 관성입니다. 개인과 조직의 니즈를 충분히 고려하여 구성된 터치바는 단축키보다 접근성이 더 높고, 확장 프로그램이나 업무자동화 모듈과 대립하는 것이 아니라 그것들을 더 편하게 사용할 수 있도록 도와줍니다.
여기서 끝이 아니라고?
저는 한 조직이 일하는 방식을 관찰하여 해당 비즈니스에 최적화된 Tocuhbar Language를 만들고, 개인의 성향이나 직무에 맞게 UI를 Specialized하는 것에 관심이 많습니다. 최근에는 Slack이나 Notion, OKR이나 CFR을 돕는 TouchBar 구성을 고민하고 있죠.
간단한 예로 emoji를 활용하여 33)TLO(Traffic Light Opinion, 초록/노랑/빨강으로 안건에 대한 의사를 표시하는 것)나 34)SV(Score Voting, 1-5나 1-10의 스케일로 안건에 대해 평가하는 것)를 하고 있다면 터치바로 인해 더 편해질 수 있을 겁니다. Long Press를 이용한다면 자리를 많이 차지하지도 않을 것 같네요.
터치바를 더 생산적으로 다루는 유저들이 많아지기를 바라며, 아래에 터치바 커스터마이징을 위한 툴 BTT와 대표적인 프리셋 GoldenChaos에 대한 링크를 공유드립니다.
오류 및 개선안/새로운 아이디어 제보, 워크숍이나 협업 제안에 관한 댓글이나 연락은 언제든 환영합니다. 제 터치바 UX/UI 프리셋을 요청하시는 분들이 있는데, 디벨롭중이라 공개적으로 공유하지는 못하는 점 앙해 부탁드립니다:)
BTT(Better Touch Tool) 소개 및 다운로드
BTT의 GoldenChaos-BTT 프리셋 다운로드
https://community.folivora.ai/t/goldenchaos-btt-the-complete-touch-bar-ui-replacement/1281
