아무도 나를 채용하지 않는다면,
내가 먼저 나를
채용하면 된다.

8장. 홈페이지 — 검증한 환경과 쓰는 환경을 같게 만든다

홈페이지를 만들며 처음으로 “됐다는데 안 된” 경험을 했습니다.

개발할 때 쓰는 HTTP 서버에서는 화면과 사진이 잘 보였습니다. 코드도 오류 없이 동작했습니다. 그런데 제가 실제로 사용하던 방식대로 파일을 더블클릭해 file:// 경로로 열자 사진이 보이지 않았습니다.

검증한 환경에서는 통과했지만, 사용하는 환경에서는 실패한 것입니다.

그날부터 이 문장을 기준으로 삼았습니다.

돌아간다와 사람 눈에 보인다는 완전히 다른 말이다.

코드를 읽은 것과 실제로 본 것을 가릅니다

홈페이지 확인은 세 단계로 나눌 수 있습니다.

코드 확인      경로와 문법이 맞는지 읽는다
개발 환경 확인  서버에서 기능이 동작하는지 본다
사용 환경 확인  실제 사람이 여는 경로·브라우저·기기에서 본다

앞 단계가 뒤 단계를 대신하지 못합니다.

코드가 맞아도 브라우저의 보안 규칙 때문에 사진이 막힐 수 있습니다. 컴퓨터에서 잘 보여도 휴대폰에서는 버튼이 가려질 수 있습니다. 한 브라우저에서 통과해도 사용자가 쓰는 브라우저에서는 다르게 보일 수 있습니다.

중요한 것은 개발자가 어떤 환경에서 만들었는지가 아닙니다. 사용자가 어디에서 어떤 순서로 쓰는가입니다.

짧은 말은 다른 화면을 만듭니다

사진이 많은 화면을 보며 “한 화면에 들어오게 해줘”라고 말한 적이 있습니다.

AI는 사진과 글을 작게 줄여 한 화면에 모두 넣었습니다. 제가 원한 것은 압축이 아니었습니다. 스크롤 한 번에 한 장면이 도착하고, 사진이 많으면 다음 페이지로 넘기는 것이었습니다.

같은 말처럼 보여도 결과는 달랐습니다.

그래서 수정할 때는 원하는 화면뿐 아니라 실제 사용하는 장면을 함께 말하게 됐습니다.

누가 보는가:
어떤 기기와 브라우저로 여는가:
어떤 경로로 들어오는가:
한 화면에서 무엇을 먼저 봐야 하는가:

“사진이 안 보여요”를 고칠 수 있는 말로 바꿉니다

저처럼 화면이 다르게 보이면 이 세 가지를 먼저 함께 전합니다.

어떻게 열었나: 파일을 더블클릭했어요 / 받은 링크를 눌렀어요.
어디에서 봤나: 내 컴퓨터의 브라우저 / 휴대폰의 브라우저입니다.
무엇이 달랐나: 제목과 글은 보이는데 사진만 빈칸이에요.
같은 파일을 다른 경로로 열었을 때는: [직접 확인한 결과만 적습니다].
원본을 지우지 말고, 이 차이가 나는 이유부터 찾아주세요.

이렇게 말하면 AI가 “사진이 깨졌다”는 한 문장만 듣고 엉뚱한 파일을 새로 만드는 일을 줄일 수 있습니다. 화면을 보여줄 때는 주소창의 비밀 링크나 다른 사람의 이름이 함께 찍히지 않았는지도 봅니다.

고쳤다는 답을 받으면 처음 실패했던 방식으로 다시 엽니다. 다른 창에서 잘 열린다는 답만 받고 끝내면 같은 문제가 남을 수 있습니다.

독자가 자기 일에 적용하는 방법

웹페이지나 온라인 문서를 확인하기 전에 검수표 첫 줄에 이것을 적으십시오.

어디에서, 누가, 어떤 순서로 쓸 것인가.

그다음 실제 사용자가 하는 순서를 그대로 따라가 보세요. 링크를 눌러 들어오고, 휴대폰으로 읽고, 버튼을 누르고, 뒤로 돌아가 보십시오.

개발 화면의 성공은 좋은 출발입니다.

하지만 사람이 보는 화면의 성공이 마지막 확인입니다.