화면이 깨지는 문제를 AI가 고쳐준다

왜 화면이 깨질까

만든 사람이 가장 마지막에 알아차린다. 페이지가 깨지는 문제에는 그런 곤란한 성질이 있습니다. 만드는 본인은 대개 회사의 큰 컴퓨터 화면으로 보고 있습니다. 거기서는 아무 일도 일어나지 않습니다. 그런데 같은 페이지를 지하철에서 스마트폰으로 연 사람에게는, 글자가 중간에 잘리고 버튼이 겹쳐서 읽고 싶은 마음이 사라지는 모습으로 보입니다. 만드는 사람과 읽는 사람이 서로 다른 크기의 화면을 보고 있다. 이것이 애초의 원인입니다.

또 하나의 이유는, 내용이 "딱 정해진 너비"로 만들어져 있다는 점입니다. 사진의 가로 너비를 숫자로 고정해 버리면, 화면이 그 숫자보다 좁아지는 순간 밖으로 삐져나옵니다. 종이 전단지라면 종이 크기는 처음부터 정해져 있습니다. 하지만 웹 페이지는 여는 사람의 화면에 맞춰 늘어나고 줄어들어야 합니다. 여기가 종이와 가장 다른 점이고, 익숙하지 않은 사람이 가장 많이 걸려 넘어지는 곳이기도 합니다.

같은 페이지, 다른 모습

지금 벌어지는 일

컴퓨터에서 완벽해도, 스마트폰에서는 읽을 수 없다.

• 가로로 3장 나란히 놓은 카드가, 태블릿에서는 빽빽해져 읽기 어려워집니다.
• 글자가 틀 밖으로 삐져나오거나, 위쪽 메뉴가 내용과 겹치기도 합니다.
• 알아차리는 것은 확인 작업이 끝나갈 무렵. 심할 때는 공개한 뒤입니다.

다음 사진은 완전히 같은 내용이 화면 크기에 따라 얼마나 다른 것처럼 보이는지를 나란히 놓은 것입니다. 왼쪽과 오른쪽에서 내용은 한 글자도 달라지지 않았습니다. 달라진 것은 너비뿐입니다.

여기서 중요한 것은, 이것이 "만든 사람의 실력이 나쁘다"는 이야기가 아니라는 점입니다. 화면 크기는 수없이 많습니다. 사람의 눈으로 전부 확인하며 다니는 것은 애초에 무리한 작업입니다.

지금까지의 고치는 방법과, 그 수고

수고는 드는데, 놓치는 것이 생긴다

지금까지도 고치는 방법은 있었습니다. 다만 어느 것이든 사람의 손과 시간을 잔뜩 씁니다. 차례대로 살펴봅니다.

너비마다 손으로 쓰기

이 너비에서는 이렇게 보여준다, 하고 하나씩 씁니다. 쓴 만큼 고칠 곳도 늘어납니다. 지시를 10개 쓰면, 나중에 문구 하나를 바꾸는 것만으로도 10군데를 다시 살펴보게 됩니다. 인수인계서를 페이지 너비 수만큼 따로따로 만드는 것과 같습니다.

실제 기기로 확인하기

스마트폰과 태블릿을 여러 대 책상에 늘어놓고 비교해 봅니다. 고칠 때마다 전부 다시 해야 합니다. 게다가 손에 있는 기기는 기껏해야 몇 종류. 세상에 있는 화면 크기는 그보다 훨씬 많으니, 반드시 놓치는 것이 생깁니다.

부품 모음 사용하기

미리 준비된 부품을 조합하는 방법도 있습니다. Tailwind(페이지의 겉모습을 짧은 지정으로 다듬는 도구)나 Bootstrap(마찬가지로 자주 쓰는 부품을 모아 둔 도구)이 유명합니다. 다만 너비는 미리 정해져 있습니다. 준비된 너비와 내 페이지가 깨지는 너비가 딱 들어맞는다는 보장은 없습니다.

바꿀 너비를 정하는 법

여기가 가장 어렵다

깨지는 너비는 내용이 정한다.

• 기기의 규격이 아니라, 글자나 항목이 줄바꿈되는 자리에서 정해집니다.
• 위쪽 메뉴가 줄바꿈되는 곳이 920px(px는 화면의 촘촘함을 재는 단위)이라면, 거기서 보여주는 방식을 바꿉니다.
• 843px에서 깨지는 원인이 너비와 여백과 글자 크기가 겹친 결과일 때도 있습니다.

즉 "스마트폰은 몇 px, 태블릿은 몇 px"라고 표로 외워도 맞지 않습니다. 내 페이지의, 내 문장의 길이가 깨지는 자리를 정하고 있습니다. 아래 그림은 그 사고방식을 그림으로 나타낸 것입니다. 숫자를 먼저 정하는 것이 아니라, 내용이 줄바꿈되는 자리를 찾은 다음에 숫자를 정한다는 순서에 주목해 주세요.

Claude에게 맡기기: 입구는 두 개

여기서부터가 본론입니다. 이 "찾고, 고치고, 확인하는" 끈기가 필요한 작업은 AI에게 맡길 수 있습니다. 입구는 두 개가 있고, 목적에 따라 나눠 씁니다. 여기를 잘못 고르면 돌아가게 되니, 처음에 확실히 해 둡니다.

앞으로 새로 만들 거라면 Claude.ai(화면에서 대화하며 부탁할 수 있는 입구). 이미 있는 페이지를 고칠 거라면 Claude Code(내 컴퓨터 안에 있는 파일 묶음을 그대로 읽고 고칠 수 있는 도구). 방법만 배우고 싶다면 Claude.ai로 충분합니다. 다음 그림이 그 갈림길입니다.

망설여질 때의 판단은 단순합니다. 고치고 싶은 페이지의 파일이 이미 내 컴퓨터 안에 있는지 없는지. 있다면 Claude Code, 아직 아무것도 없다면 Claude.ai. 그것만으로 정해도 괜찮습니다.

이렇게 부탁하면 이렇게 돌아온다

그대로 따라 할 수 있는 말투

부탁하는 방법은 새로 들어온 사람에게 부탁할 때와 같아도 괜찮습니다. 전문 용어는 필요 없습니다. 곤란한 상태와 어떻게 되었으면 하는지를 그대로 말합니다.

"3열로 된 카드를, 스마트폰에서는 1열로"

가로로 늘어선 3장이 좁은 화면에서는 세로로 쌓입니다. "보기 좋게 해 줘"라고만 하면 상대도 헤매니, 몇 개 늘어선 것을 몇 개로 하고 싶은지까지 말하는 것이 요령입니다.

"768px보다 좁으면 메뉴를 접어 줘"

가느다란 화면에서는 위쪽 메뉴를 버튼 하나로 모읍니다. 너비의 숫자를 모르겠다면 "스마트폰에서는"이라고 쓰면, 알아서 적당한 너비를 골라 줍니다.

"왜 이렇게 만드는지 알려 줘"

고른 이유도 돌아오니, 다음부터는 스스로 정할 수 있습니다. 이것이 은근히 가장 효과가 큽니다. 한 번 이유를 들어 두면, 두 번째부터는 스스로 판단할 수 있게 됩니다. 다음 사진은 실제로 이렇게 부탁했을 때의 흐름입니다.

이미 있는 페이지를 고치기

여기서부터는 Claude Code를 쓰는 쪽 이야기입니다. 어떤 도구인지 살펴보고, 설치 안내까지 나아갑니다. 어려워 보이지만 할 일은 세 가지뿐. 설치하고, 열고, 우리말로 부탁하기. 그것뿐입니다.

먼저 도구를 내 컴퓨터에 설치합니다. 설치 안내가 화면에 나오니 그대로 진행합니다. 걸려 넘어지기 쉬운 것은 "설치가 된 건지 아닌지 모르겠다"는 점입니다. 안내의 마지막에 도구의 번호(버전)가 표시됩니다. 이 번호가 나오면 설치되었다는 신호입니다. 나오지 않으면 아직 설치되지 않은 것입니다.

고치고 싶은 파일 묶음을 열기

실제 화면

고치고 싶은 페이지가 들어 있는 곳을 먼저 열어 둡니다.

여기를 건너뛰는 사람이 아주 많습니다. 상대는 열려 있는 곳 안만 봅니다. 다른 곳을 열어 둔 채로 "고쳐 줘"라고 부탁해도, 고치고 싶은 페이지를 찾지 못해 이야기가 어긋납니다. 먼저, 고치고 싶은 페이지가 들어 있는 폴더를 연다. 순서는 이것뿐입니다.

우리말로 부탁하기

실제 화면

곤란한 점을 그대로 우리말로 전합니다.

"첫 페이지가 스마트폰으로 보면 가로로 삐져나옵니다. 고쳐 주세요." 이 한 문장으로 통합니다. 영어로 바꿀 필요도, 전문 용어로 바꿔 말할 필요도 없습니다. 오히려 무리해서 전문가인 척하는 말투를 쓰면, 뜻이 흐려져서 엉뚱하게 고치게 됩니다. 곤란한 상태를 동료에게 상담할 때의 말 그대로 쓰는 것이 가장 확실합니다.

고칠 때까지의 4가지 흐름과, 점검의 틀

이 순서는 바꾸지 않는다

부탁한 뒤, 뒤에서는 다음 순서로 작업이 진행됩니다. 이 순서는 바꾸지 마세요. 건너뛰면 고친 줄 알았는데 다른 곳이 깨집니다.

1. 지금의 만듦새를 살펴본다

깨짐의 원인이 되는 고정된 너비를 찾아, 그 자리를 줄 번호와 함께 알려 줍니다. 곧바로 고치지 않고, 먼저 원인이 있는 곳을 찾아냅니다. 이것은 수리하기 전에 견적을 받는 것과 같습니다. 여기서 알려 준 자리는 나중에 다시 볼 수 있게 메모해 두면 안심입니다.

2. 고정을 부드러운 지정으로 바꾼다

딱 정해진 너비를 그만두고, 남은 자리에 맞춰 늘어나고 줄어드는 형태로 만듭니다. "반드시 가로 너비 ◯◯"가 아니라 "들어가는 만큼 넓어진다"로 바꾼다는 뜻입니다. 이것이 깨짐에 대한 근본적인 처방이 됩니다.

3. 좁은 너비에서 확인한다

320px와 512px에서 가로로 삐져나오지 않았는지 봅니다. 가장 좁은 곳에서 통과하면, 넓은 곳은 대개 통과합니다. 반대로 하면 놓치는 것이 생깁니다.

4. 기기 크기로 통과시킨다

iPhone SE부터 iPad Pro, 컴퓨터까지 차례로 확인합니다. 여기까지 해야 비로소 "고쳐졌다"고 말할 수 있습니다. 다음 그림이 이 4가지 흐름의 전체 모습입니다. 살펴본다→고친다→확인한다의 순서를 기억하고 가세요.

마지막으로 점검의 틀을 만든다

다음에 깨지지 않기 위해

한 번 고치고 끝내면, 다음에 글을 덧붙였을 때 또 깨집니다. 그래서 점검 자체를 틀로 만들어 남깁니다. Playwright(사람 대신 페이지를 조작하며 확인해 주는 도구)를 쓰면, 정해 둔 크기를 언제든 같은 순서로 다시 살펴볼 수 있습니다. 매번 같은 순서이므로, 사람에 따라 놓치는 것이 달라지는 일도 없습니다.

이것이 있으면, 고친 뒤에 다른 곳이 깨져도 바로 알 수 있습니다. 해서는 안 되는 것은, 점검의 틀을 만들지 않고 "이번에는 고쳐졌으니 됐다"로 끝내는 것입니다. 페이지는 계속 더하고 지우는 것이므로, 깨짐은 반드시 돌아옵니다. 점검의 틀은 그 되돌아옴을 지켜봐 주는 장치입니다.

정리: 내일부터 할 수 있는 것

여기까지의 내용을 내일 그대로 손을 움직일 수 있는 형태로 정리합니다. 전부를 한 번에 할 필요는 없습니다. 위에서부터 차례로, 하나씩이면 충분합니다.

• 내가 관여하는 페이지를 우선 스마트폰으로 열어 본다. 컴퓨터에서 깔끔해도 스마트폰에서는 깨집니다
• 깨진 곳을 찾았다면, 바꿀 너비는 기기가 아니라 내용이 정한다고 기억해 둔다
• 앞으로 새로 만들 거라면 Claude.ai에게 부탁하고, 이미 있는 것을 고칠 거라면 Claude Code에게 살펴보게 한다
• 부탁할 때는 곤란한 상태를 우리말 그대로 쓴다. 전문 용어로 바꾸지 않는다
• 살펴본다→고친다→확인한다의 순서를 지킨다. 확인하기 전에 다음으로 넘어가지 않는다

AI 도서관

팔로우와 좋아요, 부탁드립니다

AI를 일에 쓰는 이야기를 쉽게 한 편씩 내고 있습니다. 다음 회에도 여기서 만나요.