[올인원 배당 파이어족 은퇴 시뮬레이터 메이킹 로그 #10] 모바일 반응형 깨짐 현상과 슬라이더 터치 오류 해결기

 

안녕하세요! 방구석에서 시작한 작은 아이디어를 세상에 쏘아 올린 1인 개발자입니다.

드디어 길고 길었던 [파이어족 은퇴 시뮬레이터] 메이킹 로그 시리즈의 마지막, 10편에 도착했습니다! 지난 9편에서 붉은색 배포 에러를 극복하고 무사히 전 세계에 제 웹사이트를 런칭했었죠. 제 넓은 27인치 PC 모니터에서 돌아가는 시뮬레이터의 모습은 그야말로 완벽 그 자체였습니다.

 

"크, 역시 나는 천재야!"라며 자아도취에 빠져있던 것도 잠시, 침대에 누워 제 스마트폰(아이폰)으로 접속해 본 순간 저는 경악을 금치 못했습니다. 화면이... 화면이 완전 박살이 나 있었거든요! 오늘 마지막 편에서는 초보 프론트엔드 개발자들이 무조건 겪게 되는 관문, '모바일 반응형 깨짐 현상'과 '터치 오류'를 어떻게 극복했는지 그 눈물겨운 버그 픽스 스토리를 들려드리겠습니다.

 

"내 폰에서는 왜 이래!" 찌그러진 화면의 공포

PC 모니터에서 제 웹사이트는 크게 두 덩어리로 나뉘어 있었습니다. 왼쪽에는 값을 조절하는 '입력 패널'이, 오른쪽에는 결과를 보여주는 '파란색 결과창'과 '그래프'가 나란히 서 있는 아주 예쁜 좌우 분할 구조였죠.

그런데 이 광활한 좌우 구조를 손바닥만 한 스마트폰의 좁은 가로 폭 안에 억지로 욱여넣으려고 하니 대참사가 발생했습니다. 파란색 결과창은 찌그러지다 못해 폭발하기 직전이었고, "당신의 은퇴 예정일은..."이라는 글씨는 갈 곳을 잃고 밖으로 흉측하게 삐져나와 있었습니다. 그뿐만이 아닙니다. 애써 예쁘게 그려놓은 J커브 차트의 맨 아래쪽 연도 표시(X축) 글씨들은 공간이 부족해서 자기들끼리 겹쳐지며 마치 검은색 바코드처럼 변해버렸습니다. 제가 사용자라도 당장 뒤로가기 버튼을 누르고 싶을 만큼 끔찍한 모습이었죠.

 

마법의 주문, 미디어 쿼리(@media)로 숨통 틔워주기

이 총체적 난국을 해결하기 위해 저는 CSS의 구원자, '미디어 쿼리(@media)'를 꺼내 들었습니다. 미디어 쿼리는 쉽게 말해 웹사이트가 접속한 기기의 화면 크기를 스스로 눈치채고, 그에 맞게 옷을 갈아입도록 지시하는 마법의 명령어입니다. 저는 코드 파일에 이렇게 지시사항을 적어두었습니다. "만약 사용자가 접속한 화면의 가로 폭이 스마트폰처럼 좁다면(예를 들어 768픽셀 이하라면), 억지로 왼쪽 오른쪽 나란히 서 있으려고 낑낑대지 마! 그냥 미련 없이 방향을 틀어서 위아래로 나란히(세로 방향) 서 있어!"

 

이 간단한 지시사항 하나가 들어가자마자 마법이 일어났습니다. 답답하게 찌그러져 있던 입력 패널이 위쪽으로 넓게 자리를 잡고, 그 아래쪽으로 파란색 결과창과 그래프가 차례대로 큼직하게 층을 쌓으며 배치된 것입니다. 글씨가 삐져나오던 문제도 가로 공간이 넉넉해지면서 아주 깔끔하게 안으로 쏙 들어갔습니다.

 

 

차트 글씨가 겹쳐요! 바코드 탈출기

레이아웃은 세로로 예쁘게 정렬했지만, 차트 아래쪽의 '연도' 글씨가 겹치는 문제는 아직 남아있었습니다. 좁은 모바일 화면 안에 10년, 20년 치의 막대한 연도 글씨를 다 구겨 넣으려니 텍스트들이 서로 어깨를 부딪치고 난리가 난 거죠.

이 문제는 Recharts 라이브러리의 옵션을 살짝 건드려서 아주 우아하게 해결했습니다. 글씨가 뚱뚱해서 양옆으로 겹친다면? 글씨를 대각선으로 눕혀버리면 됩니다! 차트의 X축 옵션에 각도 조절 기능을 넣어서, 연도 글씨(예: 2030년, 2035년)들이 45도 각도로 삐딱하게 서 있도록 만들었습니다. 이렇게 하니 글씨가 아무리 많아도 서로 겹치지 않고 아주 깔끔하고 세련된 형태의 차트가 완성되었습니다. 모바일에서 차트 그리시는 분들은 이 '글씨 눕히기' 스킬을 꼭 기억해 두세요!

 

엄지손가락을 위한 배려, 슬라이더 터치 오류 해결

눈에 보이는 디자인은 다 고쳤는데, 이번에는 제가 직접 폰으로 사이트를 만져보다가 화가 치밀어 올랐습니다.

PC에서 마우스로 조작할 때는 아주 부드러웠던 '슬라이더(Range Input)'가, 스마트폰에서는 제 굵은 엄지손가락으로 아무리 문질러도 뻑뻑하게 잘 안 움직이는 겁니다. 슬라이더를 잡고 오른쪽으로 밀려고 하는데, 자꾸 전체 웹페이지 화면이 덜컹거리며 스크롤이 되어버렸기 때문입니다. 이건 터치 이벤트가 충돌해서 벌어지는 현상입니다. 기계는 제가 화면을 넘기려고 터치한 건지, 슬라이더를 움직이려고 터치한 건지 헷갈렸던 거죠.

 

이 얄미운 버그는 CSS에 touch-action이라는 속성을 부여해서 완벽하게 제압했습니다. 슬라이더 부분에는 "사용자가 좌우로 손가락을 문지르면 이건 무조건 슬라이더만 움직이는 거야! 화면 스크롤은 절대 움직이지 마!"라고 꽉 박아둔 것이죠. 여기에 추가로 제 굵은 엄지손가락도 찰떡같이 인식할 수 있도록 슬라이더 손잡이(Thumb)의 동그란 크기를 모바일 화면에서만 1.5배 더 크게 키워주었습니다. 그제야 비로소 기름칠을 한 듯 아주 매끄럽고 쫀득쫀득한 슬라이더 조작감이 스마트폰에서도 완벽하게 구현되었습니다.

 

 

대장정의 마무리: 쓸모 있는 도구를 만들었다는 것

이렇게 해서 자잘한 모바일 버그 픽스까지 모두 마치고, 정말로, 진짜로 '올인원 배당 파이어족 은퇴 시뮬레이터'가 세상에 완벽하게 공개되었습니다! 처음에는 그저 "남이 만든 엑셀 파일이 스마트폰에서 보기 불편해서" 시작했던 아주 작은 투정이었습니다. 그런데 기획을 다듬고, 코드를 짜고, 에러와 싸우며 해결책을 찾아가는 이 모든 과정을 거치고 나니, 제 손끝에서 사람들에게 실제적인 도움을 주는 어엿한 '프로덕트(Product)' 하나가 탄생해 있었습니다.

 

이 10부작의 메이킹 로그를 작성하면서 저 스스로도 정말 많이 배우고 성장했습니다. 제 블로그의 글이, 그리고 제가 겪었던 수많은 오답과 삽질의 기록들이, 지금 이 시간에도 모니터 앞에서 에러와 씨름하고 있을 수많은 예비 1인 개발자분들에게 따뜻한 해답과 용기가 되기를 진심으로 바랍니다.

 

파이어족 계산기 프로젝트의 기록은 여기서 마침표를 찍지만, 저의 코딩 여정과 지식 나눔은 앞으로도 계속됩니다. 다음번에는 또 어떤 흥미로운 웹 서비스와 트러블슈팅 이야기로 찾아올지 기대해 주세요. 그동안 긴 시리즈를 함께 달려와 주신 모든 분들께 깊은 감사를 전합니다!

[실무에서 복붙해 쓰는 에러 해결 및 트러블슈팅 가이드 #01] "Cannot read properties of undefined" 에러의