모바일은 작은 PC 화면이 아닙니다
PC에서 메인 페이지도 만들었고, 회사소개도 다듬었고, 서비스와 고객 사례, 문의 동선까지 어느 정도 갖췄다면 이제 이런 생각이 들 수 있습니다. '이제 거의 끝난 것 아닌가?'
하지만 회사 홈페이지 제작에서 마지막에 반드시 넘어야 할 산이 하나 있습니다. 바로 모바일 화면입니다. 요즘 방문자는 회의실 컴퓨터 앞에서 우리 회사를 처음 만나는 것이 아니라, 지하철 안에서, 카카오톡으로 받은 링크를 누르며, 검색 결과를 스마트폰으로 훑다가 우리 홈페이지에 들어옵니다. 그러니 PC 화면이 아무리 멋져도 모바일에서 제목이 잘리고, 버튼이 작고, 문의 폼이 불편하면 방문자는 조용히 뒤로 가기 버튼을 누릅니다.
아임웹은 템플릿과 AI 기반 제작 흐름에서 모바일 화면 자동 생성을 지원합니다. 공식 홈페이지에서도 AI 제작, 템플릿, 모바일 자동 생성 같은 쉬운 제작 흐름을 강조하고 있습니다.1 이것은 분명 큰 장점입니다. 초보자가 백지에서 모바일 화면까지 하나하나 코딩하지 않아도 기본 모양이 잡히기 때문입니다.
다만 여기서 중요한 오해를 하나 풀어야 합니다. 자동 생성은 '초안이 생긴다'는 뜻이지 '검수 없이 완성된다'는 뜻이 아닙니다. PC에서 예쁘게 배치한 3열 카드, 가로로 긴 이미지, 멋을 위해 크게 넣은 문장, 표와 지도와 문의 폼은 모바일로 넘어오면서 전혀 다른 표정을 짓습니다. 어떤 것은 생각보다 잘 정리되고, 어떤 것은 갑자기 답답해 보이고, 어떤 것은 아예 누르기 어려워집니다.
이번 장의 목표는 단순합니다. PC에서 만든 사이트를 스마트폰 사용자가 보기 좋고, 읽기 쉽고, 행동하기 쉬운 화면으로 바꾸는 것입니다. 모바일 완성도는 더 이상 부가 작업이 아닙니다. 모바일 완성도가 곧 홈페이지 완성도입니다.
먼저 모바일 미리보기로 들어가세요
가장 먼저 할 일은 디자인 모드에서 모바일 화면으로 전환하는 것입니다. 아임웹의 실제 페이지 디자인은 디자인 모드에서 진행하며, 이곳에서 텍스트, 이미지, 버튼, 게시판, 지도 같은 위젯을 추가하고 배치할 수 있습니다. 또한 그리드와 섹션을 활용해 콘텐츠를 정리하는 방식이 아임웹 디자인의 기본입니다.2
디자인 모드에 들어갔다면 상단의 화면 전환 아이콘, 즉 PC와 모바일 화면을 바꿔 보는 뷰포트 전환 기능을 찾습니다. PC 화면에서만 작업하지 말고 모바일 뷰로 전환한 뒤, 실제 스마트폰 폭에서 사이트가 어떻게 보이는지 확인하세요. PC와 모바일은 표시 방식이 다르기 때문에, PC에서 보이던 요소가 모바일에서 다르게 보이거나 숨김 처리되어 보이지 않는 일이 생길 수 있습니다.3
여기서 초보자가 자주 하는 실수는 메인 페이지만 모바일로 확인하는 것입니다. 회사 홈페이지는 메인 페이지만으로 평가되지 않습니다. 방문자는 서비스 페이지로 바로 들어오기도 하고, 고객 사례를 본 뒤 문의 페이지로 이동하기도 하며, 회사소개 페이지에서 신뢰를 판단하기도 합니다. 따라서 모바일 점검은 모든 주요 페이지에서 해야 합니다.
처음에는 다음 순서로 확인하면 좋습니다.
메인 페이지: 첫 화면에서 회사의 핵심 가치와 문의 버튼이 보이는가
회사소개 페이지: 긴 문장이 모바일에서 읽기 좋은 길이로 나뉘어 있는가
서비스·제품 페이지: 카드, 표, 이미지가 한 줄씩 자연스럽게 내려오는가
포트폴리오·고객 사례 페이지: 썸네일과 설명이 작아져도 의미가 전달되는가
문의·예약·상담 페이지: 입력칸, 동의 체크박스, 제출 버튼을 손가락으로 편하게 누를 수 있는가
이 과정을 거치면 바로 보입니다. PC에서는 꽤 괜찮았던 사이트도 모바일에서는 '너무 길다', '너무 빽빽하다', '버튼이 어디 있는지 모르겠다'는 문제가 드러납니다. 이것은 실패가 아닙니다. 이제 진짜 홈페이지가 완성되기 시작했다는 신호입니다.
모바일 첫 화면은 3초 안에 이해되어야 합니다
모바일에서 가장 중요한 구간은 첫 화면입니다. 스마트폰으로 사이트에 들어온 방문자는 화면을 아래로 내리기 전에 아주 짧은 시간 동안 판단합니다. '여기가 내가 찾던 회사인가?', '무엇을 해주는 곳인가?', '믿을 만한가?', '바로 문의할 수 있나?' 이 네 가지 질문에 첫 화면이 답하지 못하면, 아래에 아무리 좋은 내용이 있어도 읽히기 어렵습니다.
PC 메인 화면에서는 넓은 배경 이미지 위에 큰 문장, 보조 문장, 버튼 두 개, 인증 로고, 스크롤 유도 요소까지 넣어도 어느 정도 여유가 있습니다. 하지만 모바일에서는 그런 구성이 순식간에 복잡해집니다. 스마트폰 첫 화면은 작은 쇼윈도와 같습니다. 많은 상품을 다 보여주려는 매장보다, 가장 팔고 싶은 상품 하나를 정확히 보여주는 매장이 더 좋아 보입니다.
모바일 첫 화면에는 다음 세 가지가 바로 보여야 합니다.
회사명 또는 로고
우리가 해결하는 문제를 담은 한 문장
문의하기, 상담 신청, 견적 요청 같은 대표 CTA 버튼
CTA는 Call To Action의 줄임말입니다. 방문자에게 다음 행동을 요청하는 버튼이라고 이해하면 됩니다. 회사 홈페이지에서는 보통 '문의하기', '상담 신청', '견적 요청', '전화하기', '카카오톡 상담'이 CTA가 됩니다.
예를 들어 PC 첫 화면에 이런 문장이 있었다고 해보겠습니다.
'정밀 제조 산업의 복잡한 생산 문제를 데이터 기반 자동화 시스템으로 해결하는 스마트 팩토리 파트너'
PC에서는 멋있어 보일 수 있지만 모바일 첫 화면에서는 너무 깁니다. 줄바꿈이 많아지고, 배경 이미지와 겹치면 읽기 피곤해집니다. 모바일에서는 이렇게 줄이는 편이 좋습니다.
'생산 현장을 더 빠르고 정확하게 바꿉니다'
그리고 그 아래에 짧은 보조 설명을 붙입니다.
'스마트 팩토리 구축과 자동화 설비 컨설팅을 함께 제공합니다.'
마지막으로 버튼은 하나를 먼저 보여줍니다.
'상담 문의하기'
이렇게 하면 방문자는 첫 화면에서 우리 회사가 무엇을 하는지, 어떤 행동을 하면 되는지 바로 이해합니다. 모바일 첫 화면은 화려함보다 즉시성이 중요합니다.
PC의 좌우 배치를 모바일의 읽는 순서로 바꾸기
PC에서 가장 많이 쓰는 구성은 좌우 배치입니다. 왼쪽에는 제목과 설명, 오른쪽에는 이미지. 또는 왼쪽에는 제품 사진, 오른쪽에는 특징 목록. 넓은 화면에서는 매우 안정적인 구조입니다. 하지만 모바일에서는 좌우가 사라지고 위아래로 쌓입니다. 이때 어떤 순서로 쌓이느냐가 중요합니다.
모바일에서 가장 자연스러운 흐름은 '제목 → 핵심 설명 → 이미지 → 버튼'입니다. 사람은 먼저 이것이 무엇인지 알고 싶어 하고, 그다음 시각 자료로 확인한 뒤, 마지막에 행동합니다. 그런데 PC에서 이미지가 왼쪽, 텍스트가 오른쪽에 있었던 섹션이 모바일로 자동 변환되면서 '이미지 → 긴 설명 → 제목 → 버튼'처럼 어색하게 보일 수 있습니다. 그러면 방문자는 이미지를 보고도 이것이 무엇을 의미하는지 모른 채 스크롤을 내리게 됩니다.
이럴 때는 모바일 뷰에서 섹션 순서를 확인하고, 위젯 배치를 조정합니다. 아임웹의 그리드와 위젯 배치 방식을 활용하면 PC에서는 가로로 정리된 콘텐츠를 모바일에서는 세로 흐름에 맞게 다듬을 수 있습니다. 만약 기존 섹션의 순서 조정만으로 해결되지 않는다면 모바일 전용 섹션을 따로 만드는 방법도 있습니다.
예를 들어 PC용 섹션은 이렇게 둡니다.
왼쪽에는 고급스러운 현장 사진, 오른쪽에는 '전문 엔지니어가 직접 진단합니다'라는 제목과 설명, 버튼을 배치합니다.
그런데 모바일에서 사진이 먼저 너무 크게 나오고 정작 제목은 아래로 밀린다면, 모바일 전용 섹션을 새로 만들어 이렇게 구성합니다.
'전문 엔지니어가 직접 진단합니다'라는 제목을 먼저 보여주고, 한두 줄 설명을 붙인 뒤, 세로형으로 잘린 현장 이미지를 넣고, 마지막에 '진단 상담 신청' 버튼을 배치합니다.
이 차이는 작아 보이지만 실제 느낌은 큽니다. PC 디자인을 억지로 줄인 화면과 모바일 사용자를 위해 다시 정돈한 화면은 스크롤 한 번만 해도 티가 납니다.
2열, 3열, 4열 카드는 모바일에서 1열로 생각하세요
서비스 소개, 제품 목록, 장점, 고객 사례를 만들 때 카드형 레이아웃을 많이 씁니다. PC에서는 3열 카드가 보기 좋습니다. 한 줄에 세 개씩 나란히 놓으면 전문적이고 정돈된 느낌이 납니다. 하지만 모바일에서는 이야기가 달라집니다. 3열을 억지로 유지하면 카드 하나의 폭이 너무 좁아지고, 글자는 작아지며, 이미지는 의미를 잃습니다.
모바일에서는 기본적으로 1열을 기준으로 생각하세요. 카드 하나가 한 화면 폭을 충분히 쓰도록 만들고, 제목과 설명, 버튼이 위에서 아래로 읽히게 해야 합니다. 방문자는 스마트폰에서 좌우 비교를 오래 하지 않습니다. 위에서 아래로 빠르게 훑습니다.
카드형 섹션을 모바일로 점검할 때는 한 카드씩 보며 판단합니다. 카드 하나만 떼어놓고 봐도 의미가 통하는지 확인하세요. PC에서는 카드 세 개가 함께 있을 때 균형이 맞았지만, 모바일에서는 카드 하나하나가 독립된 설명 단위가 됩니다.
좋은 모바일 카드는 대체로 이런 구조를 가집니다.
짧은 카드 제목
두 줄 이내의 핵심 설명
필요할 때만 들어가는 아이콘 또는 이미지
다음 행동으로 이어지는 작은 링크나 버튼
예를 들어 PC에서 '기획 컨설팅 / 디자인 제작 / 운영 관리'라는 3개 카드를 한 줄로 보여줬다면, 모바일에서는 각 카드를 세로로 쌓습니다. 그리고 각 카드 설명이 세 줄, 네 줄씩 길어지지 않도록 줄입니다. 모바일의 카드 설명은 회사소개서 문장이 아니라 엘리베이터 안에서 읽히는 안내문에 가깝습니다.
글자는 조금 크게, 문장은 조금 짧게
모바일 가독성에서 가장 먼저 확인할 것은 글자 크기입니다. 초보자가 만든 사이트는 대개 PC에서는 괜찮지만 모바일에서 본문이 작습니다. '그래도 확대하면 보이잖아'라고 생각하면 안 됩니다. 방문자가 손가락으로 확대해야 읽히는 홈페이지는 이미 불편한 홈페이지입니다.
모바일 본문은 대체로 15~17px 정도에서 시작해 보는 것이 좋습니다. 업종과 폰트에 따라 차이는 있지만, 14px 이하로 내려가면 긴 문장을 읽을 때 피로감이 커질 수 있습니다. 제목은 페이지의 위계에 따라 다르지만, 모바일에서는 너무 큰 제목도 문제입니다. 제목이 한 단어씩 줄바꿈되어 화면을 밀어내면 멋있다기보다 불안정해 보입니다.
문장 길이도 줄여야 합니다. PC에서는 한 줄에 길게 들어가던 문장이 모바일에서는 서너 줄로 늘어납니다. 그래서 PC에서 자연스러웠던 문장이 모바일에서는 무겁게 느껴집니다. 모바일용 카피는 더 직접적이어야 합니다.
예를 들어 이런 문장이 있습니다.
'저희는 다년간 축적된 프로젝트 경험과 산업별 전문성을 바탕으로 고객사의 비즈니스 환경에 최적화된 맞춤형 솔루션을 제공합니다.'
나쁜 문장은 아니지만 모바일에서는 숨이 깁니다. 이렇게 바꿔봅니다.
'산업별 경험을 바탕으로 우리 회사에 맞는 솔루션을 제안합니다.'
훨씬 빨리 읽힙니다. 전문성이 사라진 것이 아닙니다. 모바일에서 이해되는 속도가 빨라진 것입니다.
버튼은 손가락으로 누르는 물건입니다
PC에서는 마우스 커서로 아주 작은 링크도 정확하게 누를 수 있습니다. 하지만 모바일에서는 손가락으로 누릅니다. 손가락은 마우스보다 큽니다. 그래서 모바일 버튼은 보기 좋은 장식이 아니라 실제로 누르기 쉬운 물건이어야 합니다.
버튼을 점검할 때는 색상보다 먼저 크기와 간격을 보세요. 버튼 높이는 너무 낮지 않게 만들고, 버튼 주변에는 충분한 여백을 둡니다. 버튼이 두 개 이상 나란히 있을 때는 특히 조심해야 합니다. '문의하기'와 '자세히 보기'가 너무 붙어 있으면 방문자는 엉뚱한 버튼을 누를 수 있습니다.
회사 홈페이지에서 모바일 버튼은 보통 하나를 강조하는 편이 좋습니다. PC에서는 '회사소개 보기'와 '상담 문의하기'를 나란히 둘 수 있지만, 모바일 첫 화면에서는 대표 행동 하나를 먼저 보여주는 것이 명확합니다. 만약 두 개를 모두 보여줘야 한다면 위아래로 쌓고, 가장 중요한 버튼을 위에 둡니다.
버튼 문구도 모바일에서는 짧아야 합니다. '전문 컨설턴트에게 프로젝트 상담 문의하기'보다는 '상담 문의하기'가 좋습니다. '서비스 상세 내용 확인하기'보다는 '서비스 보기'가 낫습니다. 모바일 버튼은 설명문이 아니라 문손잡이입니다. 잡는 순간 어디로 가는지 알면 충분합니다.
표, 지도, 폼은 가장 잘 깨지는 구간입니다
모바일에서 특히 조심해야 할 요소가 있습니다. 바로 표, 지도, 문의 폼입니다. 이 세 가지는 PC에서 만들 때는 문제없어 보이지만 모바일로 오면 갑자기 불편해지기 쉽습니다.
표는 가로 폭이 넓습니다. 제품 사양, 요금제 비교, 서비스 범위 등을 표로 만들면 PC에서는 깔끔하지만 모바일에서는 글자가 작아지거나 좌우 스크롤이 생깁니다. 좌우 스크롤이 반드시 나쁜 것은 아니지만, 초보자용 회사 홈페이지에서는 되도록 피하는 편이 좋습니다. 중요한 정보라면 표를 카드형 목록으로 바꾸는 것을 고려하세요.
예를 들어 PC 표가 이렇게 되어 있다고 해보겠습니다.
서비스명, 제공 범위, 소요 기간, 추천 대상, 문의 버튼이 한 줄에 들어갑니다.
모바일에서는 각 서비스를 하나의 카드로 바꿉니다.
'브랜드 홈페이지 제작'이라는 제목 아래에 제공 범위, 소요 기간, 추천 대상을 짧게 나열하고 마지막에 '견적 문의' 버튼을 넣습니다. 이렇게 하면 방문자는 좌우로 밀지 않고도 정보를 읽을 수 있습니다.
지도는 화면을 너무 크게 차지하지 않도록 주의합니다. 모바일에서 지도가 첫 화면 가까이에 너무 크게 나오면 방문자는 콘텐츠를 읽기도 전에 길찾기 화면을 만난 것처럼 느낍니다. 오시는 길 페이지라면 괜찮지만, 메인 페이지 하단에 넣는 지도라면 적당한 높이로 줄이고, 바로 아래에 주소와 '길찾기' 버튼을 함께 둡니다.
폼은 더 중요합니다. 문의 폼은 방문자가 고객이 되는 마지막 문턱입니다. 여기서 입력칸이 작거나, 항목이 너무 많거나, 개인정보 동의 체크박스가 누르기 어렵다면 전환이 떨어집니다. 전환이란 방문자가 우리가 원하는 행동을 실제로 하는 것을 말합니다. 문의 폼에서는 제출 완료가 전환입니다.
모바일 문의 폼은 최소한 다음을 확인하세요.
이름, 연락처, 문의 내용처럼 꼭 필요한 항목만 먼저 보이는가
입력칸 높이와 간격이 손가락으로 누르기 편한가
개인정보 수집 동의 문구와 체크박스가 너무 작지 않은가
제출 버튼이 화면 아래에서 명확하게 보이는가
전화 상담, 카카오 상담 같은 빠른 대안이 함께 제공되는가
문의 폼을 다듬을 때 욕심을 줄이는 것이 중요합니다. 회사 입장에서는 예산, 일정, 업종, 상세 요청, 첨부파일까지 모두 받고 싶습니다. 하지만 모바일 방문자 입장에서는 그 순간이 부담스럽습니다. 처음부터 너무 많은 정보를 요구하기보다, '연락처와 간단한 문의'를 먼저 받고 상담 과정에서 세부 정보를 확인하는 편이 문의 장벽을 낮출 수 있습니다.
장식은 줄이고, 행동은 남기세요
PC에서 멋있어 보이는 장식 요소가 모바일에서는 피로감을 줄 수 있습니다. 배경 이미지 위에 겹친 반투명 박스, 움직이는 효과, 큰 아이콘, 반복되는 슬로건, 의미가 약한 분위기 사진이 대표적입니다. 넓은 화면에서는 브랜드 감성을 만들지만, 작은 화면에서는 핵심 내용을 밀어내는 장애물이 되기도 합니다.
모바일에서는 장식보다 정보와 행동이 먼저입니다. 이 말은 디자인을 포기하라는 뜻이 아닙니다. 오히려 더 세련되게 줄이라는 뜻입니다. 좋은 모바일 디자인은 비어 보이지 않으면서도 복잡하지 않습니다. 한 섹션에 하나의 메시지만 남기고, 그 메시지를 이해하는 데 필요 없는 이미지는 과감히 숨기거나 줄입니다.
아임웹에서는 PC용 섹션과 모바일용 섹션을 구분해 운영하는 방식이 유용할 때가 있습니다. 예를 들어 PC에서는 넓은 배경 이미지와 긴 문장, 여러 개의 버튼이 들어간 섹션을 사용합니다. 하지만 모바일에서는 같은 내용을 짧은 문장, 세로형 이미지, 큰 버튼 하나로 다시 구성합니다. 그리고 PC용 섹션은 모바일에서 숨기고, 모바일용 섹션은 PC에서 숨깁니다.
물론 모든 섹션을 이렇게 따로 만들 필요는 없습니다. 사이트 관리가 복잡해질 수 있기 때문입니다. 하지만 첫 화면, 서비스 핵심 소개, 문의 유도 구간처럼 성과에 직접 영향을 주는 구간은 모바일 전용으로 한 번 더 다듬을 가치가 있습니다.
모바일 하단 CTA를 준비하세요
모바일 사용자는 스크롤을 내리다가 관심이 생기면 바로 행동하고 싶어 합니다. 그런데 문의 버튼이 페이지 맨 위나 맨 아래에만 있으면 다시 찾아가야 합니다. 이때 유용한 것이 하단 CTA입니다. 화면 아래쪽에 '전화', '카카오 상담', '문의하기' 같은 버튼을 고정하거나, 주요 섹션마다 반복해서 배치하는 방식입니다.
초보자라면 처음부터 복잡한 고정 버튼을 만들려고 하기보다, 주요 섹션 끝마다 같은 CTA 버튼을 반복해도 충분합니다. 예를 들어 서비스 설명이 끝날 때마다 '이 서비스 문의하기'를 넣고, 고객 사례가 끝난 뒤에는 '비슷한 프로젝트 상담하기'를 넣습니다. 방문자가 확신을 느끼는 순간 바로 움직일 수 있게 하는 것이 핵심입니다.
모바일 CTA를 만들 때는 버튼 문구를 상황에 맞게 바꾸면 더 자연스럽습니다. 모든 버튼이 '문의하기'이면 편하지만 조금 기계적으로 보일 수 있습니다. 서비스 페이지에서는 '우리 회사에 맞는지 상담하기', 포트폴리오 페이지에서는 '비슷한 사례 문의하기', 오시는 길 페이지에서는 '방문 상담 예약하기'처럼 맥락을 반영하면 방문자의 마음을 더 정확히 건드립니다.
다만 버튼이 너무 많아도 피곤합니다. 한 화면에 강조 버튼이 여러 개 보이면 무엇을 눌러야 할지 모릅니다. 모바일에서는 '지금 이 화면에서 가장 중요한 행동 하나'를 정하고 그것만 선명하게 보여주세요.
실제 스마트폰으로 테스트해야 완성입니다
디자인 모드의 모바일 미리보기는 매우 유용합니다. 하지만 최종 검수는 실제 스마트폰으로 해야 합니다. 미리보기에서는 괜찮아 보였는데 실제 기기에서는 주소창 높이 때문에 첫 화면 구성이 달라 보이거나, 버튼을 누를 때 손가락이 불편하거나, 이미지 로딩이 생각보다 느린 일이 생길 수 있습니다.
게시 전에는 실제 스마트폰에서 처음 방문자처럼 사이트를 열어봅니다. 가능하면 아이폰과 안드로이드 기기에서 모두 확인하면 좋습니다. 회사 내부 직원 한 명에게 링크를 보내고 아무 설명 없이 사용해보라고 하는 것도 좋은 방법입니다. 만든 사람은 이미 구조를 알고 있기 때문에 불편함을 못 느끼지만, 처음 보는 사람은 바로 막히는 지점을 말해줍니다.
최종 테스트는 다음 순서로 진행하세요.
메뉴 열기: 햄버거 메뉴가 잘 열리고, 하위 메뉴를 누르기 쉬운가
첫 화면 확인: 회사의 핵심 문장과 대표 CTA가 바로 보이는가
CTA 클릭: 문의, 전화, 카카오, 예약 버튼이 올바른 위치로 연결되는가
폼 입력: 이름, 연락처, 문의 내용을 실제로 입력하고 제출 직전까지 가보았는가
지도 확인: 주소가 보이고 길찾기 또는 지도 앱 연결이 자연스러운가
이미지 로딩: 큰 이미지가 늦게 뜨거나 깨져 보이지 않는가
긴 스크롤: 페이지가 너무 길어 지치지 않고 중간중간 행동 버튼이 보이는가
여기서 하나라도 불편하다면 수정해야 합니다. '조금 불편하지만 괜찮겠지'라고 넘긴 부분이 실제 방문자에게는 이탈 이유가 됩니다. 특히 문의 버튼, 전화 버튼, 카카오 상담 버튼은 반드시 눌러보세요. 회사 홈페이지에서 버튼 하나의 연결 오류는 매장 문에 붙은 잠금장치와 같습니다. 문은 멋진데 열리지 않는 상황입니다.
모바일 점검을 위한 한 페이지 처방전
마지막으로 지금 만든 회사 홈페이지를 모바일 기준으로 빠르게 점검하는 처방전을 정리해보겠습니다. 디자인 모드에서 모바일 미리보기로 들어간 뒤, 페이지마다 아래 질문에 답해보세요.
첫째, 이 화면에서 방문자가 가장 먼저 읽어야 할 문장이 보이는가. 제목이 너무 길거나 이미지에 묻혀 있다면 줄이고 위치를 올립니다.
둘째, 한 섹션에 메시지가 하나만 있는가. 회사 자랑, 서비스 설명, 고객 사례, 문의 유도가 한 화면에 뒤섞여 있다면 섹션을 나눕니다.
셋째, 버튼은 손가락으로 누르기 쉬운가. 너무 작거나 주변 요소와 붙어 있다면 크기와 여백을 키웁니다.
넷째, 2열 이상 배치가 모바일에서 자연스럽게 1열로 내려오는가. 카드가 좁아지거나 순서가 이상하다면 모바일용 배치를 다시 잡습니다.
다섯째, 표와 지도와 폼이 방문자를 귀찮게 하지 않는가. 표는 카드로 바꾸고, 지도는 적당한 높이로 줄이고, 폼은 필수 항목 중심으로 간소화합니다.
여섯째, 장식보다 행동이 잘 보이는가. 의미 없는 배경 이미지와 반복 문구가 CTA를 밀어내고 있다면 과감히 숨깁니다.
이 여섯 가지를 통과하면 사이트는 훨씬 프로답게 보입니다. 디자인 감각이 갑자기 늘어서가 아닙니다. 사용자의 상황에 맞게 정리했기 때문입니다.
좋은 모바일 사이트는 친절한 직원처럼 움직입니다
회사 홈페이지를 하나의 사무실이라고 생각해보겠습니다. PC 화면은 넓은 응접실입니다. 큰 간판도 걸 수 있고, 회사 연혁도 펼쳐 놓을 수 있고, 포트폴리오 책자도 테이블 위에 올려둘 수 있습니다. 반면 모바일 화면은 고객이 길을 걷다가 잠깐 들여다보는 작은 안내 데스크입니다. 여기서는 긴 설명보다 빠른 안내가 중요합니다.
좋은 모바일 사이트는 친절한 직원처럼 움직입니다. 방문자가 들어오면 '무엇을 하는 회사인지' 먼저 알려주고, 관심을 보이면 '어떤 서비스를 제공하는지' 정리해주고, 더 알고 싶어 하면 '사례와 신뢰 근거'를 보여주고, 마음이 움직였을 때 '여기로 문의하시면 됩니다'라고 자연스럽게 손을 내밉니다.
아임웹은 이 흐름을 초보자도 만들 수 있게 해주는 도구입니다. 하지만 마지막 친절함은 사람이 다듬어야 합니다. 모바일 미리보기로 보고, 실제 스마트폰으로 눌러보고, 문장을 줄이고, 버튼을 키우고, 순서를 바꾸는 그 작은 손질들이 홈페이지를 '그럴듯한 화면'에서 '일을 해내는 홈페이지'로 바꿉니다.
이제 우리의 사이트는 보기 좋은 것에서 한 걸음 더 나아갑니다. 스마트폰 안에서도 읽기 쉽고, 믿음직하고, 문의하기 쉬운 회사 홈페이지가 되어야 합니다. 다음 장에서는 이렇게 다듬은 홈페이지가 검색 결과에서도 발견될 수 있도록, 검색에 걸리는 홈페이지의 기본기를 살펴보겠습니다.
참고
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.