이 서브영역을 시작할 때 나는 반응형을 화면 폭에 따라 스타일을 갈아 끼우는 기술 정도로 여겼다. 몇십 편을 지나오며 그 생각은 완전히 바뀌었다. 반응형은 화면 폭만이 아니라 입력 방식, 사용자 취향, 파인 화면, 느린 연결, 시력과 손가락의 차이까지 품는 넓은 태도였다. 마지막 편은 그 여정에서 내가 몇 번이고 다시 빠졌던 함정들을 한자리에 모은다. 기술 하나하나보다, 반복해서 넘어지게 만드는 이 함정들을 아는 게 오래 남는 자산이라 믿는다.
함정은 대개 나쁜 의도에서 나오지 않는다. 오히려 잘하려는 마음, 빨리 끝내려는 마음, 완벽하려는 마음에서 나온다. 그래서 더 잘 빠진다. 여기 모은 것들은 내가 직접 발을 헛디딘 자리들이다. 남의 실수담으로 배우는 것과 자기 발이 빠져보는 것은 무게가 다르니, 이 글이 누군가에게 한 번쯤 발을 멈추게 하는 표지판이 되면 좋겠다.
1. 내 환경이 세상의 전부라는 착각
가장 뿌리 깊은 함정은 내 손안의 환경을 표준으로 여기는 것이다. 나는 좋은 컴퓨터, 큰 모니터, 빠른 연결, 최신 휴대폰으로 일한다. 그래서 나도 모르게 그 환경을 기준으로 화면을 판단한다.
느린 연결에서 몇 초씩 걸리는 로딩을 나는 못 느낀다. 오래된 기기에서 버벅이는 효과를 나는 안 겪는다. 작은 화면에서 잘리는 글자를, 큰 모니터에서는 안 본다. 이 모든 게 내 눈에만 안 보일 뿐 사용자에게는 매일의 현실이다. 나는 잘 되는데 왜 문제라는 문의가 들어오는지 이해 못 하던 시절, 사실은 내 환경이 너무 좋아서 문제를 못 보고 있었던 것이다.
이 함정에서 빠져나오는 길은 일부러 나쁜 환경을 흉내 내는 것뿐이다. 나는 연결을 느리게 조여보고, 글자를 키워보고, 오래된 기기를 열어본다. 내 환경이 특별히 좋다는 걸 늘 의식하지 않으면, 나는 자꾸 나 자신을 기준으로 세상을 재게 된다. 잘 만드는 사람일수록 자기 환경이 얼마나 특권적인지를 잊지 말아야 한다.
손가락 하나로 화면을 쥐는 사람을 떠올리는 것도 이 착각을 깨는 데 도움이 됐다. 나는 두 손으로 편히 기기를 받쳐 들고 확인하지만, 사용자는 흔들리는 버스 안에서 한 손으로 화면을 쥐고 엄지 하나로 조작한다. 그 엄지가 닿기 힘든 자리, 흔들림 속에서 빗나가는 손끝을 상상하면 버튼의 크기와 위치가 달라 보인다. 내 책상 위의 안정된 조건이 사용자의 조건과 얼마나 다른지를 떠올리는 것만으로, 놓쳤던 배려가 눈에 들어온다.
2. 픽셀을 향한 미신
숫자에 얽힌 함정도 많다. 나는 오랫동안 유명한 기기의 화면 크기 숫자를 외워두고 거기에 브레이크포인트를 맞췄다. 어떤 휴대폰이 몇 픽셀, 어떤 태블릿이 몇 픽셀, 이런 식이었다.
이 방식의 문제는 기기가 끝없이 새로 나온다는 데 있다. 오늘 외운 숫자는 내년이면 낡는다. 내가 맞춰둔 특정 폭들 사이의 어중간한 크기에서는 여지없이 배치가 어색해졌다. 나는 이걸 겪고 나서, 브레이크포인트를 기기 크기가 아니라 내 콘텐츠가 실제로 무너지는 폭에 두는 쪽으로 바꿨다. 화면을 천천히 넓히다 배치가 어색해지는 그 지점, 거기가 브레이크포인트다. 기기가 아니라 콘텐츠가 경계를 정하게 두는 것이다.
절대 픽셀로 크기를 못 박는 것도 미신에 가까웠다. 폭을 특정 숫자로 고정하면 그보다 좁은 화면에서 반드시 넘친다. 글자 크기를 픽셀로 박으면 사용자가 글자를 키워도 안 커진다. 나는 고정 숫자 대신 비율과 상대 단위에 기대는 법을 배우며, 이런 미신에서 조금씩 벗어났다. 세상에 딱 하나의 크기란 없는데, 나는 자꾸 하나의 숫자로 세상을 묶으려 했다.
브레이크포인트를 잘게 쪼갤수록 좋다는 생각도 함정이었다. 폭마다 조건을 촘촘히 두면 관리가 지옥이 되고, 조건끼리 서로 덮으며 예상 못 한 곳에서 튄다. 나는 꼭 필요한 큰 전환점 몇 개만 두고, 그 사이는 유연하게 흐르도록 두는 편이 훨씬 견고하다는 걸 배웠다. 조건이 많다고 반응형이 정교해지는 게 아니라, 오히려 부서지기 쉬워진다.
경계에서 조건이 겹치거나 벌어지는 미세한 함정도 오래 나를 괴롭혔다. 한 구간의 끝과 다음 구간의 시작을 같은 숫자로 두면 그 폭에서 두 규칙이 부딪치고, 겹침을 피하려 한쪽을 살짝 줄이면 그 한 폭에서 어느 규칙도 안 걸리는 틈이 생긴다. 화면을 아주 천천히 넓히다 그 한 폭에서만 배경이 깜빡이는 걸 보고 원인을 엉뚱한 데서 찾느라 시간을 버렸다. 지금은 경계를 또렷이 나누는 방식으로 이 틈을 없앴지만, 이런 한 픽셀의 함정은 알기 전에는 원인조차 짐작 못 한다.
3. 숨겨서 해결했다는 착각
가장 달콤한 함정은 문제를 숨겨서 해결한 것처럼 보이게 만드는 것이다. 넘치는 걸 잘라내고, 안 맞는 걸 감추면, 겉보기엔 깔끔해진다. 하지만 문제는 그대로 살아 있다.
가로로 넘치는 요소를 잘라내는 처방을 나는 오래 남용했다. 흔들림은 멈췄지만 넘치는 원인은 그대로였고, 잘린 콘텐츠 일부는 손에 닿지 않게 됐다. 증상을 덮는 약을 먼저 삼킨 셈이라, 정작 병은 못 고치고 원인을 찾을 길만 잃었다. 나는 이제 잘라내기를 원인을 없앤 뒤 마지막 안전망으로만 쓴다.
좁은 화면에서 거추장스러운 요소를 그냥 감추는 것도 흔한 함정이다. 자리가 없으니 안 보이게 치우면 편하다. 그런데 그렇게 감춘 게 실은 사용자에게 필요한 정보나 기능일 때가 있다. 데스크톱 사용자는 볼 수 있고 모바일 사용자는 못 보는, 반쪽짜리 화면이 되는 것이다. 나는 무언가를 좁은 화면에서 감추기로 할 때마다, 이게 정말 없어도 되는 것인지 아니면 자리를 못 찾은 필요한 것인지를 구분하려 애쓴다. 감추는 것과 덜어내는 것은 다르고, 못 보게 막는 것과 다른 방식으로 보여주는 것은 더 다르다.
화면에서만 감추고 실제로는 남겨두는 처리도 조심해야 한다. 눈에는 안 보이게 하면서 화면을 소리로 읽는 사용자에게는 그대로 읽히게 하는 방식은, 잘 쓰면 유용하지만 잘못 쓰면 엉뚱한 것이 읽히거나 필요한 게 안 읽힌다. 나는 무언가를 감출 때, 그것이 눈과 소리 양쪽 모두에서 의도한 대로 처리되는지를 꼭 확인한다. 보이는 것과 읽히는 것이 어긋나면, 두 사용자가 서로 다른 화면을 겪는다.
좁은 화면과 넓은 화면에 아예 다른 내용을 두 벌로 만들어 하나씩 감추는 방식은 특히 위험하다. 겉보기엔 각 화면에 딱 맞아 보이지만, 실제로는 같은 내용을 두 번 심어두고 하나를 숨기는 것이라 관리가 곱절로 힘들어진다. 한쪽만 고치고 다른 쪽을 잊으면 두 화면의 내용이 어긋나고, 검색엔진은 감춰둔 내용까지 읽어 혼란스러워한다. 나는 되도록 하나의 내용을 유연하게 변형하는 쪽을 택하고, 두 벌로 나누는 건 정말 어쩔 수 없을 때로 미룬다. 감추는 손쉬움은 늘 나중의 관리 부담으로 되돌아온다.
4. 완벽하려다 무너지는 자리
함정이 부족해서 문제가 아니라, 너무 잘하려다 생기는 함정도 있다. 나는 모든 기기에서 픽셀 하나까지 똑같아야 한다는 강박에 빠진 적이 있다.
기기마다 폰트가 다르고 브라우저마다 해석이 미묘하게 다른데, 이 모든 차이를 억지로 없애려 들면 코드가 누더기가 된다. 나는 서로 다른 환경을 하나의 모습으로 짓누르려다, 오히려 어느 환경에서도 자연스럽지 않은 화면을 만든 적이 있다. 반응형은 모든 곳에서 똑같이 보이게 하는 게 아니라, 각 환경에서 그 환경에 맞게 잘 보이게 하는 것이었다. 완전한 통일이 아니라 저마다의 적합함이 목표다.
모든 기기를 다 확인하겠다는 것도 완벽주의의 함정이다. 세상의 기기는 무한에 가까워서, 다 확인하려 들면 영영 배포를 못 한다. 나는 대표적인 몇 갈래를 정해 확실히 확인하고, 나머지는 어떤 값이 와도 견디게 짜는 쪽으로 힘을 옮겼다. 모든 경우를 확인하는 것보다, 확인 못 한 경우에도 무너지지 않게 짜는 게 현실적이다.
디자인 시안과 픽셀 단위로 똑같이 맞추려는 집착도 여기 속한다. 시안은 특정 폭 하나의 스냅숏일 뿐인데, 그 하나에 픽셀까지 맞추려다 다른 폭에서의 유연함을 잃는다. 나는 시안을 정확히 재현할 목표가 아니라 방향을 알려주는 안내로 본다. 정지된 그림 하나에 매달리면, 폭에 따라 흐르는 살아 있는 화면을 놓친다.
움직임과 효과를 과하게 넣는 것도 완벽을 향한 욕심에서 비롯됐다. 화면이 미끄러지고 요소가 부드럽게 떠오르는 효과는 매끈해 보이지만, 오래된 기기에서는 버벅이고 움직임에 민감한 사용자에게는 어지럼증을 준다. 나는 화려한 효과를 자랑처럼 얹었다가, 정작 그것 없이도 기능은 온전하다는 걸 뒤늦게 깨달았다. 효과는 어디까지나 덤이어야 하고, 그 덤이 사라져도 화면은 제 할 일을 다 해야 한다. 멋을 내려는 마음이 누군가에게는 불편이 된다는 걸 잊지 않으려 한다.
5. 순서를 거스르는 함정
작업 순서에서 오는 함정도 짚고 싶다. 나는 오랫동안 넓은 데스크톱 화면부터 만들고, 그걸 좁은 화면으로 욱여넣는 순서로 일했다. 이게 어긋남의 근원이었다.
넓은 화면을 먼저 완성하면, 그 안에 담긴 넉넉한 배치를 좁은 화면에 밀어 넣느라 조건이 겹겹이 쌓인다. 이걸 뒤집어 좁은 화면을 기본으로 깔고 넓어질 때 더하는 순서로 바꾸자, 조건이 한 방향으로만 흘러 훨씬 단정해졌다. 좁은 데서 잘 되면 넓은 데서는 웬만해선 문제가 없지만, 그 반대는 성립하지 않는다. 순서 하나가 유지보수의 난이도를 통째로 바꿨다.
확인의 순서도 마찬가지다. 넓은 창을 열어두고 작업하면 어지간한 넘침은 여백에 묻혀 안 보인다. 나는 아예 브라우저 창을 좁게 줄여둔 채로 작업을 시작하고, 넓혀가며 확인하는 쪽으로 순서를 뒤집었다. 좁은 화면에서 생기는 문제가 훨씬 많으니, 거기서부터 봐야 사고를 일찍 잡는다.
접근성을 나중에 얹으려는 순서도 함정이었다. 화면을 다 만들고 마지막에 접근성을 챙기려 들면, 이미 굳어버린 구조를 뜯어고쳐야 해서 손이 많이 가고, 결국 대충 얹거나 포기하게 된다. 나는 손끝에 맞는 크기, 키보드로 닿는 길, 소리로 읽히는 순서를 처음부터 함께 짜는 쪽으로 순서를 바꿨다. 처음부터 넣으면 자연스럽게 녹아드는 것이, 나중에 넣으려면 억지로 덧대는 짐이 된다. 순서를 앞당기는 것만으로 많은 어려움이 애초에 생기지 않는다.
6. 함정을 지나온 자리에서
이 함정들을 다시 훑어보면 공통점이 보인다. 대부분은 나 자신을 기준으로 세상을 재고, 문제를 덮어 해결한 척하고, 하나의 정답으로 모든 경우를 묶으려 한 데서 나왔다. 반응형이 어려운 건 기술이 복잡해서가 아니라, 나와 다른 수많은 사람과 환경을 상상해야 하기 때문이었다.
이 서브영역을 지나오며 내 습관 몇 개가 바뀌었다. 화면을 다 만들면 실기기로 열어보고, 글자를 키워보고, 느린 연결을 흉내 내고, 좁은 창에서 넓혀가며 확인한다. 무언가를 감출 때는 없애는 것인지 못 보게 막는 것인지 되묻는다. 숫자를 박기 전에 유연하게 흐르게 둘 수는 없는지 생각한다. 이 습관들은 화려하지 않지만, 낯선 기기 앞에서 무너지지 않는 화면을 만든다.
반응형에 완성이란 없다는 것도 받아들였다. 새 기기가 나오고, 새 화면비가 등장하고, 사용자의 환경은 계속 변한다. 그러니 특정 상태를 완성으로 못 박기보다, 어떤 변화가 와도 견디는 유연함을 갖추는 게 유일하게 오래가는 답이다. 나는 이제 다 됐다고 말하는 대신, 웬만한 변화는 견디게 해뒀다고 말한다. 그 겸손한 표현이 반응형의 본질에 더 가깝다. 좁은 화면 하나를 붙들고 씨름하던 지난 몇십 편이, 나와 다른 사람을 상상하는 훈련이었다고 생각하며 이 서브영역을 닫는다. 화면 너머에는 늘 나와 다른 손과 눈이 있고, 그 사실을 잊지 않는 것이 반응형의 처음이자 끝이었다.