데스크탑부터 스마트폰까지 완벽 점검!
Bullet으로 발행했다면, 이제 다양한 기기에서 어떻게 보이는지 확인해야 할 차례예요. 크롬 개발자 도구를 활용해 데스크탑, 태블릿, 스마트폰 등 다양한 화면 크기에서 여러분의 홈페이지를 쉽게 확인하는 방법을 알려드릴게요!
크롬 브라우저가 뭔가요? 왜 크롬을 사용해야 하나요?
크롬(Chrome)은 구글에서 만든 인터넷 브라우저예요. 인터넷 익스플로러나 네이버 웨일처럼 인터넷을 탐색할 수 있는 프로그램이죠. 크롬은 전 세계적으로 가장 많이 사용되는 브라우저이기도 하고, 특히 웹사이트를 테스트하는 데 유용한 '
개발자 도구'라는 기능을 제공해요. 이 도구를 사용하면 실제 모바일 기기가 없어도 다양한 화면 크기에서 웹사이트가 어떻게 보이는지 확인할 수 있어서 정말 편리해요!크롬 브라우저는 어떻게 설치하나요?
크롬 브라우저 설치는 아주 간단해요. 다음 단계만 따라 하시면 됩니다:
- 인터넷 브라우저(이미 사용 중인 어떤 브라우저든)를 열고 구글에 '크롬 다운로드'라고 검색하거나 직접 google.com/chrome을 방문하세요
- Chrome 다운로드 버튼을 클릭하세요
- 다운로드된 설치 파일을 실행하세요
- 화면의 안내에 따라 설치를 완료하세요 (대부분 '다음' 버튼만 계속 클릭하면 돼요)
- 설치가 완료되면 바탕화면에 크롬 아이콘이 생성됩니다
개발자 도구는 무엇이고 어떻게 열 수 있나요?
개발자 도구는 크롬에 내장된 강력한 기능으로, 웹사이트의 구조를 살펴보고 다양한 화면 크기에서 테스트할 수 있게 해주는 도구예요. 마치 웹사이트의 내부를 들여다볼 수 있는 특별한 '돋보기'라고 생각하시면 됩니다!
개발자 도구를 여는 방법은 아주 간단해요
- 방법 1: 키보드 단축키 사용하기
- Windows/리눅스: F12 또는 Ctrl+Shift+I
- Mac: Cmd+Option+I
- 방법 2: 마우스로 열기
- 웹페이지의 아무 곳이나 마우스 오른쪽 버튼으로 클릭
- 나타나는 메뉴에서 "검사" 또는 **"요소 검사"**를 선택
- 방법 3: 메뉴에서 열기
- 크롬 창 오른쪽 상단의 세로로 된 점 세 개(⋮)를 클릭
- 도구 더보기 > 개발자 도구 선택
다양한 기기에서 웹사이트를 어떻게 테스트할 수 있나요?
개발자 도구를 열었다면, 이제 다양한 기기에서 웹사이트가 어떻게 보이는지 확인해볼 차례예요! 다음 단계를 따라해 보세요
- 크롬에서 여러분의 웹사이트(도메인)를 방문하세요
- 개발자 도구를 열면 화면 오른쪽이나 아래쪽에 새로운 패널이 나타납니다
- 개발자 도구 상단에서 모바일 장치 아이콘(작은 태블릿과 스마트폰 모양)을 클릭하세요
- 이 아이콘이 바로 반응형 디자인 모드(Responsive Design Mode)를 켜는 버튼이에요
- 이제 웹사이트가 모바일 화면처럼 변했을 거예요!
다양한 기기 크기는 어떻게 선택할 수 있나요?
반응형 디자인 모드에 들어가면, 상단에 드롭다운 메뉴가 있는데, 여기서 다양한 기기를 선택할 수 있어요
- 상단의 드롭다운 메뉴를 클릭하면 iPhone, iPad, Galaxy 등 다양한 기기 목록이 나타납니다
- 원하는 기기를 선택하면 해당 기기의 화면 크기로 웹사이트가 자동으로 조정됩니다
가장 많이 확인해야 하는 기기 크기
- 데스크탑: 1920×1080, 1366×768 (가장 많이 사용되는 해상도)
- 태블릿: iPad 768×1024 (세로 및 가로 모드)
- 스마트폰: iPhone 12/13 (390×844), Galaxy S20 (360×800)
기기별로 어떤 부분을 집중적으로 확인해야 하나요?
각 기기별로 확인해야 할 중요한 부분들이 있어요
데스크탑에서 확인할 사항
- 전체적인 레이아웃이 깔끔하게 보이는지
- 이미지와 텍스트가 너무 크거나 작지 않은지
- 메뉴와 내비게이션이 직관적으로 배치되었는지
- 스크롤 없이 첫 화면에서 중요 정보가 모두 보이는지
태블릿에서 확인할 사항
- 메뉴가 적절히 축소되거나 햄버거 메뉴로 변환되는지
- 콘텐츠가 화면 너비에 맞게 재배열되는지
- 버튼과 링크가 손가락으로 터치하기에 충분히 큰지
- 가로/세로 모드 전환 시 레이아웃이 잘 조정되는지
스마트폰에서 확인할 사항
- 텍스트가 읽기 쉬운 크기인지
- 중요한 정보가 스크롤 없이 상단에 보이는지
- 버튼과 링크 간격이 충분히 넓어 오탭을 방지하는지
- 이미지가 적절히 크기 조절되는지
- 모든 기능이 작은 화면에서도 사용 가능한지
추천 툴: 크롬 확장프로그램
클릭 한 번으로 여러 디바이스에서 보는 화면을 확인할 수 있습니다. 크롬 브라우저를 쓰시면 아래 링크에서 확장 프로그램을 다운받아 사용해 보세요!
텍스트가 잘리거나 크다고 느껴질 때!
웹사이트 테스트 중 문제를 발견했다면, 걱정하지 마세요!
- 가장 간단한 방법은
노션에서 먼저 수정하는 거에요. 글자수나 줄바꿈으로 조절해보세요!
- Bullet의 스타일 설정에서
모바일 폰트 크기를 조정해보세요
- 텍스트 박스
크기나 여백(패딩)을 수정해보세요
웹사이트를 모든 기기에서 테스트한 후에는 어떻게 해야 하나요?
다양한 기기에서 웹사이트를 테스트한 후에는 다음 단계를 진행해보세요
- 문제점 기록하기: 발견한 모든 문제를 체크하고 스크린샷을 찍어두세요
- 수정 계획 세우기: 가장 중요한 문제부터 순서대로 해결 계획을 세우세요
- 노션 페이지 수정하기: 필요하다면 원본 노션 페이지에서 콘텐츠를 수정하세요
- Bullet 설정 수정하기: Bullet 대시보드에서 필요한 설정을 조정하세요
- 재발행 및 재테스트: 변경사항을 저장하고 다시 발행한 후 테스트를 반복하세요
- 실제 기기 확인: 가능하다면 실제 스마트폰이나 태블릿으로 최종 확인해보세요
실제 기기에서도 확인해보세요!
가능하다면 실제 기기에서도 테스트해보는 것이 좋아요!
- 실제 터치 경험은 마우스 클릭과 다를 수 있어요
- 실제 네트워크 환경에서의 로딩 속도를 체험할 수 있어요
- 화면 밝기, 대비 등에 따른 가독성 차이를 확인할 수 있어요
후기 이벤트
후기 작성(클릭)하고 내 홈페이지 SEO 피드백 보고서 받아보세요!
Made with Bullet