모바일 대응

요즘 웹사이트 방문자의 대부분은 스마트폰으로 접속합니다. 내 자기소개 페이지가 휴대폰에서도 잘 보이는지 확인하고, 필요하면 수정해 봅시다.

모바일 화면 미리보기

실제 스마트폰 없이도 컴퓨터에서 모바일 화면을 확인할 수 있습니다. Chrome에 이 기능이 내장되어 있습니다.

1. Chrome에서 localhost:3000을 열어 둡니다
2. F12 키를 누릅니다 (개발자 도구가 열립니다)
3. 왼쪽 위에 있는 스마트폰 모양 아이콘을 클릭합니다
4. 화면이 스마트폰 크기로 바뀝니다

F12를 누르면 화면 오른쪽(또는 아래쪽)에 복잡한 창이 열리는데, 당황하지 마세요. 지금은 스마트폰 아이콘만 클릭하면 됩니다.

모바일에서 어떻게 보이나요?

스마트폰 크기로 바꾸면 페이지가 다르게 보일 수 있습니다:

이런 문제가 있다면 수정이 필요합니다. AI에게 한 마디만 하면 됩니다.

AI에게 반응형 디자인 요청하기

AI 채팅창(Ctrl + L)에서 이렇게 요청합니다:

모바일에서도 잘 보이게 만들어줘. 작은 화면에서는 사진과 소개글이 위아래로 배치되도록 해줘.

AI가 코드를 수정하면 Accept All을 클릭하고, Chrome에서 결과를 확인합니다.

반응형 디자인이란

반응형 디자인(Responsive Design)이란 하나의 웹페이지가 화면 크기에 따라 자동으로 모양을 바꾸는 것을 말합니다.

• 큰 화면 (컴퓨터): 사진 왼쪽, 글 오른쪽으로 나란히 배치
• 작은 화면 (스마트폰): 사진 위, 글 아래로 세로 배치

같은 페이지인데 보는 기기에 따라 최적의 형태로 보여줍니다. 별도로 "모바일 버전"을 따로 만드는 것이 아닙니다.

방금 AI에게 요청한 것이 바로 반응형 디자인을 적용하는 것이었습니다. 용어를 몰라도 AI에게 "모바일에서 잘 보이게 해줘"라고 하면 같은 결과를 얻을 수 있습니다.

다양한 화면 크기로 확인하기

Chrome 개발자 도구에서 여러 기기를 선택해서 확인할 수 있습니다:

1. 스마트폰 아이콘을 클릭한 상태에서
2. 화면 위쪽의 드롭다운 메뉴를 클릭합니다
3. iPhone SE, iPhone 14 Pro, iPad 등을 선택해 봅니다
4. 각 기기에서 어떻게 보이는지 확인합니다

모든 크기에서 글자가 잘 읽히고, 사진이 잘 보이면 성공입니다.

확인이 끝나면

모바일 미리보기를 끄려면:

1. 다시 스마트폰 아이콘을 클릭합니다 (원래 화면으로 돌아옵니다)
2. 또는 F12를 눌러 개발자 도구를 닫습니다

이 절의 요약

• F12를 누르고 스마트폰 아이콘을 클릭하면 모바일 화면을 미리 볼 수 있습니다
• 모바일에서 문제가 있으면 AI에게 "모바일에서도 잘 보이게 만들어줘"라고 요청합니다
• 반응형 디자인은 하나의 페이지가 화면 크기에 따라 자동으로 조절되는 것입니다
• 다양한 기기 크기로 확인해 보는 습관을 들이면 좋습니다