brunch

매거진 이준우의 기획 노트

라이킷 12 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by JunWoo Lee Dec 25. 2019

텍스트 입력 화면을 따로 만들어야 하는 이유

OREO를 만들며 배운 점

이번에 OREO 글쓰기법을 연습할 수 있는 OREO 튜토리얼 사이트를 만들었다. 리액트를 배우며 사이드 프로젝트로 진행한 건데 얻는 게 참 많았다.

OREO Tutorial

하버드 150년 전통 글쓰기 비법

victorlee917.github.io

배운 점 중 가장 기억에 남는 건 사실 사용자 입장에서 보면 아주 사소한 부분이다. 나조차도 평소엔 별생각 없이 지나쳤던. 하지만 초보 기획자의 입장에서 봤을 땐 나름 인사이트를 줄 수 있는 부분이다. 그래서 이렇게 글로 남겨두려 한다.

0. 처음 엇나가면 크게 혼쭐난다.

구글처럼 입력창을 화면 중간에 딱! 놓고 싶었어

OREO에서 가장 중요한 건 텍스트 입력이었다. 왜냐면 그 기능의 거의 전부였기 때문이다. 그래서 최대한 이쁘게 보여주고 싶었다. 그래서 텍스트 입력창을 위의 구글 검색창처럼 화면 중간에 배치하는 방향으로 기획하고 개발에 착수했다.

그런데 이때는 몰랐다. 이게 이후 일을 두 번 하게 할 실수였다는 것을.

중간중간 내 노트북에서 작업 결과를 확인할 땐 문제를 발견할 수 없었다. 그래서 별생각 없이 계속 개발을 했다. 그런데 거의 다 만든 뒤 깃허브에 올리고 내 아이폰에서 작업물을 확인할 때 눈물이 나왔다.

입력창이 가상 키보드에 가려진다..

기대와 현실

나는 가상 키보드가 올라오면 자연스레 입력창도 위로 밀려날 것이라 생각했다. 실제로 안드로이드 폰에선 그랬다. 입력창을 누르면 가상 키보드가 올라온 만큼 입력 폼이 위로 올라갔다. 그런데 아이폰에서는 그렇지 않았다. 가상 키보드가 화면 중간의 입력창을 가려 뭔가를 입력하더라도 뭐가 입력됐는지 확인하기 어려웠다.

1. 뭐가 문제인데?

문제를 해결하기 위해 원인을 이리저리 찾아봤다. OREO를 개발한 지 꽤 되어 관련 내용은 잘 기억나지 않지만 일단 결론을 간추리면 다음과 같았다.

안드로이드와 사파리의 가상 키보드는 작동하는 방식이 다르다.
관련해서 자세한 내용이 알고 싶다면 여기.

나는 서로 다른 방식으로 작동하는 환경에서 최대한 같은 화면을 보여주기 위해 이런저런 시도를 했다. 구글링을 해가며 뷰포트를 요리조리 만져봤다. 하지만 당시엔 어떻게 해도 만족스러운 결과가 나오지 않았다. 어찌저찌 사파리에서 잘 보이게 만들면 안드로이드 쪽 화면이 망가졌다.

왜 안 되는 거야. 왜 사파리는 가상 키보드를 이딴 식으로 만든 거지? 원하는 대로 안되니 내 허접한 개발 실력을 넘어 애꿎은 사파리 개발자를 욕하고 있었다. 그러다 이대로면 안 되겠다 싶어서 마음을 가다듬고 다시 생각해보기로 했다. 그리고 그제야 답이 보였다.

2. 세상에 이유 없는 플로우는 없다.

마치 파랑새처럼 내가 그토록 구글링 하며 찾아 헤맸던 답은 구글 메인에 있었다. 나는 구글 메인 그리고 이어서 네이버, 왓챠를 확인하고 유레카를 외쳤다.

분리된 검색창과 텍스트 입력 화면

구글과 네이버 모두 검색창을 누르면 텍스트 입력 화면으로 이동한다. 그리고 위 이미지처럼 텍스트 입력 화면에서 입력창은 화면 최상단에 있다. 이런 방식의 장점은 어느 브라우저 환경에서든 입력창이 키보드에 가려지지 않는다는 것이다. 또한 입력창과 키보드 사이의 남는 공간에 추천/최근 검색어 정보를 제공해줄 수도 있다.

평소엔 일반 사용자로서 별생각 없이 따랐는데 알고 보니 현실적인 이유가 있는 플로우였다. 하지만 나는 처음에 PC 기준으로만 생각했기에 그 점을 놓쳐버렸다. 그래서 결국 화면을 뜯어고쳐 다시 만들게 되었다. 그래도 어쨌든 기분은 좋았다. 문제는 해결했고 새로운 걸 배웠으니까.

또 컴포넌트식으로 개발을 해서인지 고치는 것이 막상 그렇게 오래 걸리지도 않았다.