17편. 모바일에서도 되게 만들기

모바일에서도 되게 만들기

앱을 인터넷에 올리고 나서 폰으로 열어봤어요. 그런데 화면이 영 어색했습니다.

컴퓨터에서는 멀쩡했는데, 폰에서는 글자가 삐져나오고 버튼이 너무 작고. 사람들은 대부분 폰으로 볼 텐데 이러면 안 되잖아요.

생각해보면 당연한 거였어요. 요즘은 여행 정보를 컴퓨터 앞에 앉아서 보는 것보다 대부분 침대에 누워서, 출퇴근길에, 폰으로 보겠죠.

근데 저는 만들 때 컴퓨터 화면만 보고 만들었어요. 그러니 컴퓨터에선 완벽한데 폰에선 엉망이었던 거죠. 큰 화면에 맞춘 걸 작은 화면에 욱여넣으니 깨질 수밖에요.

이걸 두 화면 다 잘 보이게 만드는 걸 "반응형"이라고 하더라고요. 화면 크기에 따라 알아서 모양이 바뀌는 거요.

그래서 작업 방식을 바꿨어요. 폰 화면을 기준으로 확인하기 시작했습니다.

AI한테 "폰에서 글자가 화면 밖으로 나가", "버튼이 너무 작아서 누르기 힘들어"처럼 폰에서의 문제를 구체적으로 말했어요. 그러면 폰 화면에 맞게 고쳐줬습니다.

이때도 직접 확인이 중요했어요. 고쳤다고 하면 진짜 폰으로 열어봤어요. 글자가 잘 들어가는지, 버튼이 누를 만한지, 스크롤이 자연스러운지. 사용자가 진짜 쓸 환경에서 봐야 진짜 문제가 보이거든요.

여기서도 보는 눈이 도움이 됐어요. 폰에서 살짝 어색한 것들이 눈에 띄었거든요.

글자가 너무 빽빽하다, 버튼 사이가 좁아서 잘못 누르겠다, 위아래 여백이 답답하다. 기능은 되는데 "쓰기 불편한" 부분들이요. 이런 걸 하나하나 다듬었어요.

작은 화면일수록 이런 디테일이 더 중요해요. 공간이 좁으니까 조금만 빽빽해도 답답하게 느껴지거든요. 덜어내고, 띄우고, 키우고. 폰에서 편하게 보이도록 계속 손봤습니다.

컴퓨터 화면에서 확인할 땐 완벽해 보였습니다. 그런데 폰으로 열어보니 버튼은 화면 밖으로 삐져나가고, 글씨는 겹쳐 보였어요. 이 앱은 여행 중에 폰으로 쓸 앱인데, 정작 폰에서 안 예쁘면 아무 의미가 없었습니다.

AI한테 "이 화면을 모바일 기준으로 다시 짜줘"라고 요청했더니, 카드 너비와 폰트 크기, 버튼 간격을 폰 화면에 맞게 다시 조정해줬습니다. 그 뒤로는 항상 컴퓨터와 폰 두 화면을 같이 띄워두고 작업합니다.

디자이너로 일할 때도 항상 강조하던 원칙인데, 제 앱을 만들면서 다시 한번 뼈저리게 느꼈어요. 모바일 우선으로 만들어야 한다는 걸요.

이론으로는 알고 있었어요. "모바일 퍼스트로 디자인해야 한다." 그런데 직접 겪어보니 이게 단순히 화면을 줄이는 게 아니라, 애초에 손가락으로 누르기 편한 크기, 한 손으로 조작 가능한 배치까지 다시 생각해야 하는 일이었습니다.

컴퓨터에서는 마우스로 정밀하게 클릭할 수 있지만, 폰에서는 손가락이 훨씬 뭉툭하죠. 버튼 크기 하나도 다시 키워야 했고, 글자 크기도 조정했습니다.

여행 중에 실제로 쓸 앱이라는 걸 계속 되새기면서 모바일 화면을 우선순위에 뒀습니다.

모바일 화면을 다 고치고 나서 실제로 폰 하나만 들고 카페에 나가 일정을 짜봤습니다. 컴퓨터 앞에서 만들 때는 몰랐던 불편함들이 그제야 보이더라고요. 실제로 쓸 환경에서 직접 써보는 게 얼마나 중요한지 다시 느낀 순간이었습니다.

모바일 화면을 손보고 나서부터는 새 기능을 만들 때마다 항상 폰 화면부터 먼저 확인합니다. 순서를 바꾼 것뿐인데 훨씬 자연스러운 결과물이 나오더라고요. 어디서부터 시작하느냐가 결과를 꽤 많이 바꾼다는 걸 배웠습니다.

1. 따로 만드는 게 아니라 둘 다 되게 만듭니다. 화면 크기에 따라 알아서 모양이 바뀌게 하는 걸 반응형이라고 해요. 하나로 만들되 양쪽 다 잘 보이게 하는 거예요.

2. 폰 기준으로 확인하세요. 사람들 대부분 폰으로 봅니다. 컴퓨터에서만 확인하지 말고 꼭 폰으로 직접 열어보세요.

3. 작은 화면일수록 여백이 중요합니다. 폰은 공간이 좁아서 조금만 빽빽해도 답답해요. 덜어내고 띄우는 데 더 신경 쓰세요.

폰에서도 잘 보이게 됐으니, 이제 진짜로 사람들한테 보여줄 차례예요. 다음 글에서는 만든 앱을 처음 세상에 공개하고 받은 반응을 이야기하겠습니다.