Goodnotes 심층 분석: 화이트보드 만들기 – 창의력을 위한 무한 캔버스

공유

베타 기간 동안, 올 여름 선보일 새 기능들을 미리 사용할 수 있는 특별한 기회를 준비했습니다. Goodnotes는 사용자 커뮤니티와 함께 새로운 기능들을 만들어 나가고 있는데요. 이번에 Goodnotes가 새롭게 선보이는 내용과 그 개발 과정, 신기능을 업데이트하기까지 어떤 시행착오가 있었는지 유저 여러분들께 전해드리고자 합니다.

사용자들로부터 가장 많은 요청이 있었던 기능! 무한 캔버스 도입

오랜 기간 동안 사용자들로부터 가장 많은 요청을 받았던 기능은 바로 무한 캔버스였습니다. 저희는 굿노트 공식 채널들을 통해 여러분이 원하는 바를 확실히 이해할 수 있었는데요. 무한 캔버스는 UserVoice에서 가장 많은 추천을 받은 아이디어 중 하나였고, Reddit 스레드에도 더 많은 공간이 있었으면 좋겠다고 말하는 유저들이 많았습니다. 특히 사용자들은 마인드맵과 복잡한 다이어그램을 제한 없이 사용하고, Goodnotes를 통해 창의적이고 생산적인 방법으로 사고를 확장하고 싶어했습니다.

화이트보드의 발전

그러한 바람을 반영해, Goodnotes가 화이트보드 기능을 새롭게 선보입니다. 무한 캔버스이면서 그 이상의 가능성을 담아, 기능의 이름을 '화이트보드'라 정했습니다. 화이트보드는 이전에 없던 방식으로 창의력을 발휘할 수 있는 작업 공간으로, 사용자 여러분께 완전히 새로운 경험을 선사할 것입니다.

새 화이트보드를 열면 가장 먼저 눈에 띄는 것은 무한한 공간인데요. 어떤 제약도 없이 자유롭게 확대하거나 축소할 수 있습니다. 무한한 공간에서 방향을 잃지 않을 수 있게 배경에는 은은한 점선 격자 패턴이 표시되고, 화면 모서리에는 미니맵을 두어 보드 전체를 쉽게 볼 수 있게 했습니다. 그 옆에는 확대/축소 레벨 표시기를 두어 편리성을 더했는데요. 이러한 요소들이 서로 어우러져 작업 공간의 규모를 직관적으로 파악할 수 있게 해주고, 사용자들은 무한한 작업 공간에서 길을 잃지 않을 수 있습니다.

자세히 알아보기 – 개발 과정

화이트보드를 개발하기까지 그 과정은 결코 쉽지 않았습니다. 셀 수 없이 많은 디자인 문제와 엔지니어링 과제를 해결해야 했는데요.

배경 패턴에 완벽함을 더하다

별 것 아닌 것처럼 보일지 모르지만, 배경의 점선을 완벽하게 구현하는 것은 아주 힘든 작업이었습니다. 이 점선들의 기본 기능은 확대/축소 레벨을 암시적으로 알려주는 것입니다. 점이 커 보인다면 화면이 확대된 상태이고, 점이 작아 보인다면 화면이 축소된 것을 의미하거든요. 하지만 화면을 최소 5%로 축소하거나 최대 400%까지 확대할 수 있는 상황에서, 그 점선을 어떻게 하면 제대로 활용할 수 있을까요? 점선 한 줄만으로는 너무 촘촘하거나, 너무 드문드문 위치할 텐데요.

이는 단순히 디자인 툴만으로는 해결할 수 없는 문제기도 합니다. 이 문제를 해결하려면 감이 필요하죠. 이에 저희는 앱 내부에 특별 디버그 메뉴를 설치해, 점의 크기와 점 사이의 간격, 새로운 점선이 나타나는 확대/축소 레벨 등 여러 매개변수들을 실시간으로 조절할 수 있도록 했습니다. 다양한 사용 기기에 걸쳐 최적의 지점을 찾기까지, 거의 2달에 걸친 반복 작업을 해야 했지요. 이런 디자인 요소는 완벽히 구현된 경우 그 존재를 거의 알아채지 못하고 넘어가지만, 그렇지 않으면 그것만 눈에 들어오는 법이거든요.

미니맵으로 원활하게 탐색

또 하나의 중요한 과제는 탐색이었습니다. 무한 캔버스는 무한한 공간을 제공하지만, 동시에 쉽게 길을 잃을 수도 있음을 의미합니다. 그럴 때 필요한 것이 바로 미니맵입니다. 저희는 작은 지도의 도움을 받아 방대한 세계를 탐험하는 동영상 게임에서 영감을 얻었습니다. 그리고 여러 가지 디자인을 반복 작업해, 화이트보드 기능에 같은 논리를 적용했지요. 초반에는 미니맵과 확대/축소 레벨을 각각 화면 양측 모서리에 두었는데, 단절된 느낌을 주었기에 둘을 하나의 단위로 묶어 배치했습니다.

내부 테스트를 통해 모든 작업에 항상 미니맵이 필요한 것은 아니라는 것을 파악하고는, 이 기능을 손쉽게 끄고 켤 수 있게 토글 버튼을 두었습니다.

창의력을 올려주는 템플릿

캔버스 외에도, 저희는 사용자들의 더 빠른 작업 시작을 돕고자 여러 방법을 모색했습니다. 학생과 전문가들을 대상으로 한 연구조사를 실시한 결과, 두 그룹 모두 일관되게 템플릿 사용을 선호한다는 것을 알 수 있었습니다. 학생들은 브레인스토밍 시작에 필요한 마인드맵 템플릿을 원했고, 전문가들은 특히 협업 시 회의록이나 프로젝트 계획 작성에 필요한 일관된 템플릿을 원했습니다.

이제 사용자는 새로운 화이트보드를 만들 때, 처음부터 템플릿을 사용해 작업을 시작하거나, 작업 도중 "추가" 메뉴를 활용해 템플릿을 추가할 수 있습니다. 이것은 시작에 불과하죠! 저희는 더 다양한 템플릿을 Goodnotes에 추가하기 위해 크리에이터들과 협업하고 있으며, 향후 마켓플레이스에서 원하는 템플릿을 찾을 수 있도록 미래를 만들어 나가는 중입니다.

다이어그램 기능 개선으로 창의력 극대화

화이트보드와 함께 새롭게 추가된 주요 기능이 있다면, 그건 바로 새롭게 선보이는 다이어그램 기능입니다. 기존의 도형 도구는 매월 20%의 사용자가 이용할 정도로 많이 쓰였는데, 그 당시에도 저희는 이 기능이 훨씬 더 강력해질 수 있음을 알았습니다.

이 작업에서 가장 어려웠던 점 중 하나는 기존에 스타일러스를 사용하던 사용자들이 자연스럽게 사용할 수 있는 다이어그램 도구를 디자인하는 일이었습니다. 대부분의 다이어그램 도구는 마우스와 키보드 사용자를 위해 설계된 것이기 때문에, 저희는 Goodnotes와는 별개로, 상호작용과 제스처를 알아보고자 자체 프로토타입을 제작해야 했습니다. 사용자들은 스타일러스로 다이어그램을 그릴 때 도형을 어떻게 연결하는가? 햅틱 진동은 어느 정도로 느껴져야 할까?

저희는 대면 테스트를 통해 다양한 작업 흐름을 관찰했습니다. 일부 사용자들은 먼저 도형의 형태를 그린 다음 도형들을 연결하고 마지막에 텍스트를 추가했고, 어떤 사용자들은 도형의 형태와 텍스트를 모두 포함한 하나의 완성형 노드를 만든 뒤 다음으로 이동했는데요. 이처럼 다양한 작업 흐름을 모두 지원해야 했습니다. 전혀 예상치 못했던 작업 흐름도 있었습니다. 먼저 펜으로 생각을 적은 다음, 글 주위에 도형을 그리는 사용자들도 많았거든요. 사실 이는 스타일러스를 사용하기 아주 적합한 작업 흐름입니다. 텍스트를 적고 나서야 얼마나 큰 도형을 그려야 하는지 파악할 수 있으니까요. 이 작업을 지원하기 위해, 현재 저희는 글쓴 내용에 도형이 자동으로 연결되는 도구를 개발 중입니다.

이제껏 얻은 모든 인사이트를 바탕으로, 저희는 범위를 좁혀 현재 베타 앱에서 제공 중인 버전을 구현했습니다. 이 버전은 입력한 텍스트에 초점을 맞추고 이미지나 잉크 스트로크 같은 콘텐츠를 연결해 주지요.

함께 만들어 나가는 굿노트

현재 보시는 화이트보드 기능은 수많은 시간 동안의 연구와 디자인, 엔지니어링의 결실이지만, 이는 시작에 불과합니다. 계속해서 어떤 방향으로 가야 하는지 알기 위해, 사용자 여러분의 의견과 피드백이 반드시 필요합니다.

Goodnotes의 미래는 사용자와 양방향으로 만들어가는 것입니다. 따라서 Goodnotes의 미래를 만들어가는 저희의 노력에 여러분이 함께해 주시길 부탁드립니다. 이를 위해 베타 프로그램에 참여하고, 저희 커뮤니티의 일원이 되어, 여러분의 의견을 들려주세요.

베타 회원 가입은 goodnotes.com/beta에서 하실 있습니다.

읽어주셔서 감사합니다. 여러분의 작업물과 작품이 몹시 기대됩니다!