앱 화면 한 칸을 세 번 쟀는데 세 번 다 달랐다

좁은 폰 화면에 손님 자리를 넣었다 뺀 UI 이야기

이번 편은 화면 이야기다. 미미 앱을 폰에서 열면 처음 뜨는 첫 화면, 그 화면의 칸을 어떻게 나누고 무엇을 어디에 둘지 정하는 일이다. 이걸 UI 라고 부른다.

미미 첫 화면을 처음 짤 때, 화면 속 한 칸의 높이를 세 번 쟀다. 조금 고치고 다시 재고, 또 고치고 다시 쟀다.

같은 자리였다. 세 번 다 달랐다. 앞에 잰 값으로 다음 값을 짐작할 수도 없었다.

마지막에 잰 높이는 그대로 적혀 남았다. 한참 뒤에 그 값을 다시 꺼내 썼다. 그리고 틀렸다.

좁은 폰 화면, 손님 의자 하나

미미는 내가 만든 프로그램이다. 하는 일이 두 갈래다. 매주 실적 발표를 앞둔 회사를 일곱 개까지 골라 점수를 매기는 쪽. 그리고 조용한 회사 하나를 골라 몇 달을 지켜보는 쪽. 뒤쪽을 관찰이라고 부른다.

처음 첫 화면에는 원칙이 하나 있었다. 고른 회사가 스크롤 없이 한 화면에 다 들어가야 한다. 폰 화면은 좁은 방이었다. 칸마다 높이를 미리 정해 두고 그 안에 맞춰 넣었다.

관찰하는 회사는 방 아래쪽에 앉았다. 늘 있는 식구가 아니라 가끔 오는 손님 같은 자리다. 관찰하는 회사가 있는 주에만 의자를 놓는다.

손님 자리에 문패를 달았다

화면 바탕을 손보다가 관찰 자리가 걸렸다. 관찰은 바탕색을 조금 다르게 깔고, 왼쪽에 '관찰' 이라는 작은 글씨를 붙여 두고 있었다. 바탕이 다르다는 건 '뒤에 깔린 다른 층' 이라는 뜻이다. 그런데 관찰은 뒤에 있는 게 아니다. 같은 층에 선 다른 트랙이다.

그래서 관찰 자리를 따로 세웠다. 맨 위에 '관찰 트랙' 이라는 머리를 한 줄 달고 초록 선을 그었다. 손님 자리 위에 문패를 단 셈이다. 관찰하는 회사는 늘 하나뿐인데, 그래도 문패를 달았다. 그때 남긴 기록이다.

※ 이 글의 미미 화면은 그 시점의 미미 프로그램으로 다시 그린 것이다. 화면 속 회사와 점수는 미미가 검사용으로 저장해 둔 지난 기록이라, 그날 실제로 떠 있던 화면과 다르다. 특정 회사를 사거나 팔라는 뜻이 아니다.

세 번 쟀다

문패를 달면 손님 자리가 커진다. 좁은 방이라 다시 재야 했다. 머리를 칸 바깥에 달고 한 번, 칸 안쪽으로 들이고 한 번, 머리를 떼고 한 번. 세 번 쟀다.

세 번 다 달랐다. 커질 줄 알았는데 작아지고, 작아질 줄 알았는데 커졌다. 그때 기록이다.

미미는 스스로 검사한다 — 물어본 것만

미미에는 스스로 검사하는 장치가 있다. 무엇을 고치든 명령 하나로 천 건이 넘는 검사가 한꺼번에 돈다. 점수 계산이 그대로인지, 기록이 제자리에 들어가는지, 그리고 화면이 멀쩡한지.

화면은 작은 폰부터 큰 폰까지 여러 크기로 그려 놓고 잰다. 글자가 칸 밖으로 넘치지 않는지, 잘리지 않는지, 글자 색이 바탕에서 잘 보이는지. 사람이 폰을 여러 대 들고 일일이 보지 않아도 되게 만든 것이다.

그런데 이날 재다가 알았다. 화면 검사는 미리 만들어 둔 화면 몇 장을 놓고 잰다. 그 화면 대부분에 관찰하는 회사가 없었다. 손님이 없는 방만 재고 "넘침 없음" 이라고 통과하고 있었던 것이다. 손님이 있는 화면을 따로 넣어 재자, 넘치는 곳이 일곱 군데 나왔다.

검사는 물어본 것에만 답한다. 손님 있는 방을 안 물어보면, 손님 있는 방이 넘쳐도 모른다. 그래서 지금 미미는 검사를 새로 만들 때 규칙이 하나 있다. 일부러 고장을 내 보고, 검사가 그걸 잡는지 본다. 고장을 냈는데 검사가 통과하면, 그 자리는 검사 밖이라는 뜻이다. 그리고 다 통과해도 화면을 바꿨으면 스크린샷을 눈으로 한 번 본다. 다 통과가 화면이 맞다는 뜻은 아니어서다.

그날 규칙도 하나 고쳤다. 관찰하는 회사가 없는 주에는 그 자리를 아예 비운다. 손님이 없으면 의자도 치운다. 그 전에는 손님이 없어도 빈 의자를 놓아 두고 있었다.

문패를 떼고 이름표를 붙였다

그날 밤, 머리를 되돌렸다. '관찰 트랙' 한 줄을 떼고, 회사 이름 옆에 작은 '관찰' 표시만 붙였다. 되돌리면서 적은 문장이 이렇다.

관찰이 다른 트랙이라는 말은 틀리지 않았다. 다만 손님 하나를 위해 문패가 한 줄을 통째로 쓰고 있었다. 좁은 방에서 한 줄은 비쌌다. 이름 옆 작은 표시는 새 줄을 안 쓴다. 같은 말을 공짜로 한다.

되돌렸지만 문패를 단 이유는 지우지 않고 남겼다. 그리고 손님 자리 높이로 마지막에 잰 값을 적어 두었다.

덧붙임 — 나중에

나중에 첫 화면 맨 위에 매일 아침 볼 시장 브리핑을 얹기로 했다. 좁은 방에 새 가구를 들이는 일이다. 어딘가를 비워야 했다.

나는 관찰 자리를 두고 이렇게 말했다.

AI 는 계산을 했다. 손님 의자를 빼면 그 높이만큼 빈다. 접어 둔 브리핑 높이도 거의 그만하다. 그러니 맞바꾸면 한 화면 원칙을 지킨 채 브리핑이 들어간다.

틀렸다. 그 의자 높이는 손님이 와 있는 주에만 있는 자리였다. 그날 밤 내가 만든 규칙 그대로다 — 손님이 없으면 의자도 치운다. 손님이 없는 주에는 뺄 의자가 애초에 없으니 비는 자리도 없다. 브리핑을 넣자 검사용 화면이 전부 넘쳤다. 이번엔 미미의 화면 검사가 바로 잡았다.

그날 밤 잰 높이는 그 순간에는 맞았다. 다만 어떤 방을 놓고 잰 값인지가 숫자와 같이 남지 않았다. 나중에는 숫자만 있었다.

결국 한 화면 원칙을 버렸다. 이미 이렇게 말해 둔 참이었다.

첫 화면은 이제 아래로 내려 보는 화면이다. 관찰은 '이번 주 발표' 제목 줄 오른쪽 끝에 회사 이름이 적힌 작은 단추가 됐다. 이름 옆 '관찰' 표시도 그때 사라졌다. 잃은 것도 있다. 관찰하는 회사의 설명 두 줄이 첫 화면에 바로 안 보인다. 한 번 눌러야 보인다. 그건 받아들였다.

관찰하는 회사가 없는 주에는 단추를 아예 안 그린다. 이것만은 처음 그대로다.

오늘의 연습

잰 값은 그 방에서 잰 값이다. 손님이 와 있던 날 잰 방 크기를, 손님이 없는 날에 그대로 쓰면 안 맞는다. 숫자를 적어 둘 때 "무엇이 있을 때 잰 값인가" 를 같이 적어 두면, 나중의 내가 같은 숫자에 속지 않는다. 검사도 같다. 검사가 통과했다는 건 물어본 것에 대해서만 맞다는 뜻이다.