BytePet에 메모나 파일을 건네면 캐릭터가 먹는 동작을 하고, 보관함에는 새 항목이 남는다. 저장을 캐릭터의 행동으로 연결하고, 쌓인 자료를 다시 찾아 쓸 수 있게 다듬은 과정을 기록한다.
지난 글에서는 작은 고양이를 바탕화면에 띄우고, 잡아서 옮기고, 투명한 여백에서는 뒤쪽 앱을 클릭할 수 있게 만든 과정을 다뤘다. 고양이는 자리를 기억하며 쉬고 있었지만, 그 고양이에게 무언가를 건넬 수는 없었다.
다음에 붙인 기능은 먹이 주기였다. 메모를 입력하거나 사진 같은 파일을 놓으면, 캐릭터가 받아먹고 앱의 로컬 보관함에 저장하는 방식이다. 저장한 자료는 나중에 메뉴를 열어 다시 확인할 수 있게 했다.
이 기능은 파일을 받아 저장하는 것에서 시작해, 그 파일을 어떻게 보여주고 다시 꺼내 쓰게 할 것인지로 이어졌다. 먹는 모습만큼이나 저장 이후의 화면을 손볼 일이 많았다.
텍스트뿐 아니라 파일도 건네기
먹이라고 했을 때 처음 떠올린 것은 텍스트였다. 짧은 메모를 적고 버튼을 누르면 고양이가 먹는 식이다. 여기에 사진이나 파일도 함께 맡길 수 있으면 활용할 수 있는 장면이 더 많아질 것 같았다. 그래서 첫 저장 기능부터 텍스트와 파일을 모두 받도록 했다.
자료는 앱의 로컬 보관함에 저장했다. 텍스트는 내용을 파일로 남기고, 사진이나 문서는 원본의 내용을 보관함으로 복사한다. 파일이 있던 위치만 기억하는 방식이 아니어서, 나중에 원래 파일을 옮겨도 보관함의 복사본은 남는다.
파일 이름만으로 항목을 구분하지도 않았다. 이름이 같은 파일을 여러 번 건넬 수 있기 때문이다. 저장할 때마다 별도의 식별자를 만들고, 실제 내용과 이름·크기·저장 시각 같은 정보를 한 항목으로 묶었다. 같은 이름이 들어와도 앞서 저장한 자료를 덮어쓰지 않게 했다.
저장 과정도 곧바로 목록에 드러내지는 않았다. 먼저 임시 위치에 내용과 정보를 쓰고, 그 작업이 끝난 뒤 보관함의 정식 항목으로 옮겼다. 목록에는 이름이 있는데 실제 파일은 아직 준비되지 않은 상태를 피하기 위한 처리였다.
사용하는 사람에게는 메모나 파일 하나를 넣는 동작이지만, 앱 안에서는 받아온 내용과 목록에 보여줄 정보가 함께 준비되어야 했다.
저장이 끝나면 먹는 동작으로
먹이 주기에서 눈에 보이는 반응은 캐릭터의 동작이다. 다만 버튼을 누른 순간과 저장이 끝난 순간은 다르다. 파일을 읽지 못하거나 저장에 실패할 수도 있는데, 먼저 먹는 모습을 보여주면 자료가 들어갔다고 생각하기 쉽다.
그래서 저장에 성공한 항목이 생겼을 때 먹는 동작을 시작하도록 했다. 보관함을 갱신하는 알림과 캐릭터가 반응하는 알림을 연결해, 목록에 새 항목이 나타나는 일과 먹이를 받는 행동이 같은 결과를 가리키게 했다.
처음에는 코드로 그린 고양이에 먹는 자세를 추가했다. 이후 캐릭터를 이미지 기반으로 바꾸면서 위와 같은 모션이 들어갔다. 그림은 달라졌지만, 저장 결과를 캐릭터가 알려준다는 흐름은 유지했다.
여러 파일을 한 번에 넣었을 때는 전부 같은 결과가 나오는 것도 아니다. 일부는 저장되고 일부는 실패할 수 있다. 이때는 저장된 개수와 실패한 이유를 함께 보여주도록 했다. 먹는 모션이 있더라도 어떤 파일까지 들어갔는지는 글로 확인할 수 있어야 했다.
이 글에서 다루는 구현에는 입력 범위도 두었다. 텍스트는 1MB, 파일은 개당 25MB, 한 번에는 10개까지 받는다. 제한을 넘긴 자료는 이유를 알리고, 실패한 요청을 저장된 항목처럼 보여주지 않는다. 작은 보관함의 역할과 앱이 처리할 범위를 함께 정한 셈이다.
밥그릇은 필요할 때만 펼치기
메모를 넣으려면 입력칸이 필요하고, 파일을 넣으려면 선택 버튼이나 드롭할 곳이 필요하다. 처음에는 이런 요소가 저장된 자료와 같은 화면에 놓였다. 기능은 동작했지만, 입력하는 부분이 계속 넓게 남아 있으면 보관함을 볼 자리가 줄어든다.
먹이 화면을 다듬으면서 입력칸을 밥그릇 모양으로 만들었다. 텍스트는 그 안에 적고, 파일과 사진은 선택 버튼을 누르거나 드래그해서 넣도록 했다. 캐릭터에 직접 파일을 건네는 경로도 두었다.
그다음에는 밥그릇을 접을 수 있게 했다. 메모를 쓸 때 펼치고, 저장에 성공해 작성한 내용이 비워지면 다시 접는다. 이미 넣어둔 자료를 찾으러 왔을 때는 입력칸보다 보관함이 먼저 눈에 들어오는 편이 자연스러웠다.
파일을 선택하거나 드롭하면 바로 저장하고, 텍스트는 내용을 적은 뒤 먹이 주기 버튼으로 저장한다. 입력 중인 메모와 이미 보관한 자료가 뒤섞이지 않도록 두 동작을 나눴다. 파일을 넣는 동안에도 작성하던 텍스트가 무심코 사라지지 않게 했다.
밥그릇이라는 모양을 붙이는 것에서 끝나는 작업은 아니었다. 자료를 넣을 때와 찾을 때, 같은 화면에서 필요한 공간이 달랐다.
쌓인 먹이는 다시 찾을 수 있어야 했다
저장할 수 있게 되면 다음에는 꺼낼 방법이 필요하다. 메모와 사진, 여러 형식의 파일이 섞여 들어오는데 이름을 줄줄이 나열하는 것만으로는 찾기 어려웠다.
보관함은 파일 시스템처럼 아이콘이 바둑판 형태로 놓이는 화면으로 바꿨다. 메모는 짧은 내용이 보이는 종이로, 일반 파일은 형식을 구분할 수 있는 아이콘으로 보여줬다. 지원하는 이미지는 썸네일로 표시해 이름을 읽기 전에도 내용을 짐작할 수 있게 했다.
검색과 분류도 붙였다. 메모·사진·파일을 나누어 보거나 이름으로 찾을 수 있고, 텍스트로 저장한 메모는 본문 내용도 검색한다. 모든 파일의 내부 내용을 검색하는 기능은 아니다. 보관함에서 어떤 자료를 찾을 수 있는지 범위를 분명히 하는 편이 좋았다.
항목마다 긴 작업 버튼을 늘어놓기보다는, 하나를 선택했을 때 필요한 작업을 보여줬다. 메모라면 입력칸으로 다시 불러오고, 파일이라면 기본 앱으로 연다. 파일을 찾는 흐름과 실제로 사용하는 흐름을 이어주려 했다.
열기 전에 확인하고, 잘못 지웠다면 되돌리기
사진 하나를 확인할 때마다 다른 앱이 열리면 보관함을 오가는 흐름이 끊긴다. 메모 역시 제목만 보고 내용을 알기 어려울 수 있다. 그래서 보관함 안에서 텍스트와 지원하는 이미지 형식을 미리 볼 수 있게 했다.
키보드로도 같은 작업을 할 수 있게 했다. 방향키로 항목을 옮겨 다니고, Space로 미리보기를 열거나, 검색으로 바로 이동한다. 작은 화면이라고 해서 파일을 찾는 익숙한 조작까지 달라질 필요는 없었다.
보관함에 표시할 이름도 바꿀 수 있게 했다. 파일의 내용이나 원래 파일명을 바꾸는 대신, 보관함에서 알아보기 좋은 이름을 따로 두는 방식이다. 제목을 다듬는 일이 저장된 자료 자체를 수정하는 작업으로 이어지지 않게 했다.
삭제는 바로 없애는 대신 앱 안의 휴지통으로 옮겼다. 잘못 선택했다면 휴지통에서 확인하고 복원할 수 있다. 자료를 쉽게 넣게 만든 만큼, 정리하다 실수했을 때 다시 꺼낼 경로도 필요했다.
보관함을 쓰기 편하게 만드는 작업은 새 버튼을 추가하는 일만은 아니었다. 사진을 확인하고 돌아오거나, 이름을 바꾸거나, 지운 항목을 복원하는 작은 흐름들이 이어져야 했다.
저장과 변환은 서로 다른 자리로
BytePet에는 메모 보관 외에도 JSON과 JWT를 다루는 도구를 붙였다. JSON은 읽기 좋게 정리하고 오류 위치를 보여주며, JWT는 안의 내용을 디코딩하고 만료 정보를 확인하는 기능이다. JWT를 읽는 것은 서명의 유효성을 검증하는 것과는 구분해서 안내했다.
처음에는 먹이와 변환을 한 화면에서 다뤘지만, 두 기능을 나누는 편이 쓰기 편했다. 메모를 보관하려는 사람과 붙여넣은 내용을 변환하려는 사람은 다음에 누를 버튼이 다르기 때문이다. 나중에는 먹이와 변환을 별도 메뉴로 분리하고, 입력 내용도 각각 유지하도록 했다.
두 화면 사이의 연결은 남겼다. 보관한 메모를 변환 화면으로 보내거나, 변환 화면에 입력한 내용을 먹이 화면으로 옮길 수 있다. 먹이 화면으로 보냈다는 이유만으로 바로 저장하지는 않고, 내용을 확인한 뒤 먹이 주기로 보관하도록 했다.
개발 중인 서버의 포트를 확인하고 브라우저로 열거나 종료를 요청하는 기능도 이어서 붙였다. 이렇게 자주 쓰는 도구가 늘어나면서, 메뉴 자체를 어떻게 정리할지도 별도의 과제가 됐다.
먹이를 주고, 다시 꺼내 쓰는 곳
먹이 기능을 붙이기 전에는 캐릭터를 보고 옮기는 것이 주된 상호작용이었다. 메모와 파일을 맡길 수 있게 되면서, 캐릭터에게 건넨 것이 보관함에 남고 다시 작업으로 돌아오는 흐름이 생겼다.
처음에는 저장과 먹는 동작을 연결하는 데 집중했다. 이후에는 자료를 찾을 공간을 확보하고, 미리 보고, 이름을 고치고, 실수했을 때 복원하는 부분을 다듬었다. 넣는 순간의 반응과 나중에 꺼내 쓰는 편의성이 함께 있어야 보관함을 계속 사용할 수 있었다.
이 글의 화면은 그 과정에서 남긴 예시 자료다. 이후 상단 메뉴와 실행 구조도 바뀌었지만, 메모와 파일을 받아 로컬에 보관하고 다시 꺼내 쓰는 기능은 이어지고 있다.
다음 글에서는 이 기능들이 들어가는 패널을 집 모양으로 바꾼 과정을 다루려고 한다. 캐릭터 옆에 집과 마당을 놓으면서 생긴 공간 문제, 그리고 복잡해진 메뉴를 다시 정리한 이야기다.