고양이를 누르면 옆에 작은 집이 열린다. 지붕 아래에는 먹이와 보관함, 변환 도구, 개발 포트 같은 기능이 들어 있다. 평범한 사각형 패널을 집으로 바꾸고, 캐릭터와 함께 놓일 공간과 메뉴의 역할을 정리한 과정을 기록한다.
지난 글에서는 메모와 파일을 먹이로 건네고, 보관함에서 다시 꺼내 쓰는 기능을 다뤘다. 저장과 변환, 포트 확인까지 기능이 늘어나자 캐릭터를 누른 뒤 나타나는 화면도 점점 복잡해졌다.
처음 패널은 필요한 버튼과 입력칸을 차례로 붙인 형태였다. 기능을 넣기에는 무난했지만, 고양이 옆에 펼쳐지는 화면보다는 작은 웹 페이지를 따로 띄운 느낌이 강했다. 바탕화면에 캐릭터를 놓은 이유와 도구가 보이는 방식이 잘 이어지지 않았다.
메뉴를 정리하면서 모양도 함께 바꿔보기로 했다. 이 글에서는 초기에 집과 마당을 만든 과정부터, 나중에 상단 메뉴를 다시 다듬은 부분까지 이어서 다룬다. 집과 마당은 초기 Electron 시기에 만들었고, 뒤에서 다룰 메뉴 개편은 Tauri로 옮긴 이후의 작업이다. 실행 구조보다는 화면과 조작의 변화에 초점을 맞췄다.
작은 창 안에 설명이 너무 많았다
집으로 바꾸기 전 패널에는 위쪽에 앱 이름과 제목이 있었고, 아래쪽에도 앱을 설명하는 문구가 있었다. 그 사이에 메뉴, 입력칸, 저장 버튼, 변환 도구와 보관함이 놓였다.
하나씩 추가할 때는 필요한 요소였지만, 모아놓고 보니 작은 창에서 읽어야 할 글이 많았다. 캐릭터를 눌러 연 메뉴인데 앱 이름을 다시 크게 보여줄 필요는 없었다. 지금 할 수 있는 작업보다 제목과 안내가 먼저 눈에 들어오는 부분도 줄이고 싶었다.
그래서 상단과 하단에 반복되는 설명을 덜어내고, 기능을 고르는 부분과 실제 작업하는 부분을 나누었다. 제목이 차지하던 자리에 메뉴를 놓고, 입력칸과 결과는 그 아래에 모았다. 닫기는 모서리의 버튼과 Esc로 유지했다.
글자를 전부 없애려는 것은 아니었다. 버튼의 용도나 저장 결과처럼 행동을 판단하는 데 필요한 정보는 남겨야 했다. 계속 같은 자리에 반복되는 소개 문구와, 작업할 때 필요한 안내를 구분하는 쪽이었다.
사각형 창에서 집의 윤곽만 남기기
패널의 외형은 집으로 정했다. 캐릭터 옆에 열리는 공간이라면 지붕이 있는 작은 집이 어울릴 것 같았다. 먹이를 넣는 곳과 자료를 보관하는 곳도 그 안에 배치할 수 있었다.
모양을 바꿀 때 먼저 정리해야 했던 것은 집 뒤쪽의 배경이었다. 사각형 바탕 위에 지붕을 그리기만 하면 여전히 집 그림이 붙은 창으로 보인다. 지붕 양옆에 남는 흰색 영역을 없애고, 집 바깥으로는 바탕화면이 보이게 했다.
창이 차지하는 영역 자체는 사각형이다. 그 안에서 배경을 투명하게 두고, 보이는 지붕과 벽만 그려 집의 윤곽을 만드는 방식이다. 캐릭터를 투명 창에 띄웠던 것과 비슷하게, 창의 범위와 화면에 그려지는 모양을 나누어 생각했다.
지붕에는 기와의 선과 굴뚝, 둥근 창을 더했다. 벽에는 나무색 테두리를 두고, 내용이 들어가는 바탕은 밝게 유지했다. 집이라는 인상은 바깥 모양에서 만들고, 안쪽의 입력칸과 버튼은 읽고 누르기 쉬운 형태로 남겼다.
모든 요소를 그림으로 바꾸지는 않았다. 텍스트를 입력하고 파일을 찾는 기능은 여전히 익숙하게 사용할 수 있어야 했다. 지붕을 얹었다고 해서 검색창이나 선택 버튼의 쓰임까지 달라질 필요는 없었다.
집과 고양이가 같은 땅 위에 서 있도록
집이 생기자 다음에는 바닥이 필요했다. 고양이와 패널이 각각 떠 있는 것보다 같은 땅 위에 놓여 있으면 하나의 공간으로 보일 것 같았다.
마당의 길이는 캐릭터 아래만 받치는 정도보다 넓게 잡았다. 메뉴가 왼쪽에 열린다면 왼쪽에는 집이 들어갈 자리를, 오른쪽에는 고양이가 있을 자리를 두는 식이다. 메뉴가 닫혀 있는 동안에는 집이 있던 자리가 빈 마당으로 남는다.
처음에는 이 빈 공간에서 고양이가 왔다 갔다 하는 모습도 구상했다. 하지만 이후에는 캐릭터가 스스로 이동하지 않고, 놓아둔 자리에서 쉬도록 방향을 정했다. 사용자가 잡아서 옮기는 동작과 대기 모션은 유지하되, 마당을 돌아다니는 기능은 넣지 않았다.
배치도 하나로 고정하지 않았다. 화면 어디에 캐릭터를 놓느냐에 따라 메뉴가 편하게 열리는 방향이 다를 수 있고, 땅 없이 캐릭터만 두고 싶을 수도 있었다. 메뉴를 왼쪽 또는 오른쪽으로 열지, 땅을 표시할지는 설정에서 고르게 했다.
땅을 끄면 넓게 남겨두었던 마당 영역도 줄이고, 캐릭터 옆으로 패널이 열리게 했다. 메뉴 방향과 땅 표시 여부는 저장해서 다시 실행해도 유지한다. 마당이 앱의 분위기를 만들기는 하지만, 항상 같은 크기의 장식을 두도록 강제하고 싶지는 않았다.
메뉴를 바꿔도 집이 줄어들지 않게
집의 모양만큼 중요한 것은 열리는 위치였다. 패널 아래쪽과 캐릭터의 발이 같은 바닥에 맞아야 했고, 화면 가장자리에 놓아도 필요한 부분이 잘리지 않아야 했다.
패널의 위치는 캐릭터가 있는 창을 기준으로 계산했다. 아래쪽을 맞춘 다음 위로 펼치고, 선택한 방향에 공간이 부족하면 배치를 화면 안쪽으로 보정했다. 고양이를 옮겼을 때 열려 있는 집도 함께 따라가도록 했다.
그 뒤 기능을 늘리는 과정에서는 개발 포트를 누르면 메뉴창이 작아지는 문제가 있었다. 화면 내용에 따라 집의 높이가 달라지면 메뉴를 바꿀 때마다 집의 크기도 바뀐다. 방금 누른 메뉴와 다음에 누를 버튼의 자리도 안정적으로 유지하기 어려웠다.
이 부분은 패널의 기본 높이를 일정하게 두고, 긴 내용은 내부에서 스크롤하도록 고쳤다. 이 글의 구현 기준으로는 화면에 공간이 충분할 때 588px 높이를 사용하고, 작업 영역이 더 작을 때는 그 안에 맞춘다. 포트가 몇 개 표시되는지에 따라 집 전체의 높이를 다시 정하지는 않는다.
집의 외형을 유지하면서 내용만 바뀌게 하는 쪽이 이 메뉴에는 맞았다. 지붕과 상단 메뉴는 같은 자리에 남고, 그 아래에서 보관함을 보거나 포트를 확인할 수 있게 됐다.
지붕 아래 메뉴도 다시 정리했다
처음 집을 만들었을 때와 지금의 상단 메뉴는 다르다. 먹이와 변환이 분리되고 사용량 화면도 들어오면서, 한 줄에 놓이는 이름이 다시 늘어났다. 설정까지 같은 크기의 탭으로 나열되어 있었다.
최근에는 이 부분을 네 개의 작업 메뉴와 별도의 창 조작 버튼으로 나눴다. 먹이, 변환, 포트, 사용량을 앞에 두고, 설정과 닫기는 오른쪽에 따로 모았다.
작업 메뉴에는 밥그릇, 도구 상자, 플러그, 계기판 모양의 아이콘을 넣었다. 아이콘 아래에는 짧은 이름도 남겼다. 그림만 보고 기능을 외우게 하기보다는, 모양과 이름을 함께 보고 찾을 수 있게 하려 했다.
선택한 메뉴는 초록색으로 채워 현재 위치를 보여준다. 설정은 톱니바퀴, 닫기는 X로 구분했다. 집의 나무색과 어울리는 배경을 쓰면서도, 선택 상태는 주변과 충분히 다르게 보이도록 했다.
키보드 조작도 함께 정리했다. 좌우 방향키로 탭 사이의 초점을 옮기고, Enter나 Space를 눌렀을 때 화면이 바뀌게 했다. 방향키로 지나가기만 해도 포트 조회 같은 작업이 시작되지 않도록, 초점 이동과 메뉴 실행을 나눈 것이다.
작은 메뉴 안에서도 어디를 보고 있는지와 무엇을 실행했는지는 구분되어야 했다.
화면 위의 메뉴바는 바로 가는 길로
BytePet에는 집 안의 메뉴 외에 macOS 화면 상단의 메뉴바도 있다. 둘을 똑같이 구성하기보다는 쓰는 상황에 따라 역할을 나누었다. 이 부분 역시 집을 처음 만든 뒤, 최근에 다시 다듬은 내용이다.
메뉴바에서는 먹이 주기나 보관함 열기처럼 원하는 작업으로 바로 들어갈 수 있게 했다. 같은 먹이 화면을 열더라도 먹이를 주러 왔다면 입력칸을 펼치고, 보관함을 찾으러 왔다면 입력칸을 접고 검색할 곳에 초점을 둔다.
사용량과 개발 포트도 바로 열 수 있다. 캐릭터 선택, 숨기기와 다시 표시, 위치 되돌리기, 설정과 종료처럼 앱 전체에 해당하는 조작도 이곳에 모았다. 캐릭터를 숨겨둔 상태에서도 메뉴바를 통해 다시 찾을 수 있다.
집 안에서는 열린 화면을 오가며 작업하고, 화면 위에서는 필요한 기능을 바로 열거나 앱의 상태를 바꾼다. 두 메뉴에 같은 기능이 일부 있어도, 들어오는 목적에 맞게 첫 화면과 초점을 달리할 수 있었다.
고양이 옆에 집을 만드는 일은 외형을 바꾸는 것에서 시작했다. 여기에 마당과 배치 옵션을 붙이고, 창의 크기를 안정시키고, 메뉴로 들어오는 경로를 정리하면서 실제로 사용할 공간이 조금씩 갖춰졌다.
이제는 그 공간에 놓이는 캐릭터도 다듬을 차례다. 다음 글에서는 코드로 찍던 작은 도트를 이미지 기반 캐릭터로 바꾸고, 잠자기와 먹기, 들기 모션을 맞춘 과정을 다루려고 한다.