모바일 디자인의 8 개의 황금 규칙

Sep 16, 2025

어떻게

Mobile design: Apes gather in front of a Monolithic black smartphone; it glows with various UI elements. In the background lies a mountain range lit by a rising sun that radiates out in concentric circles.

모바일 디자인은 상대적으로 새로운 중요한 고려 사항입니다. 10 년 전, 웹을위한 디자인은 데스크톱 컴퓨터 설계를 의미합니다. 이제는 모바일 장치를 설계하는 것을 의미합니다. 휴대 전화는 증가하는 웹 트래픽을 증가시키고 숫자가 성장할 것입니다.

Statista에 따르면 2018 년 10 월에 우리는 39 억 개의 고유 한 모바일 인터넷 사용자와 전세계 모든 웹 사이트 트래픽의 50 % 이상을 보였습니다. 휴대 전화를 통해 생성되었습니다 ...에 훌륭한 웹 디자인은 더 이상 사치가 아니라 필요의 무언가입니다.

모바일 사용자에게 훌륭한 웹 경험을 만드는 것은 단순히 생성하는 것 이상을 요구합니다. 반응 형 웹 디자인 (상단에도 웹 사이트 빌더 당신의 도움을받을 수 있습니다 웹 호스팅 선택). 이 기사에서는 기본 모바일 사이트 디자인 원칙을 발견 할 수 있습니다.

01. 목표 지향적 인 경험을 구축하십시오

모바일 사용자는 매우 목표 지향 사용자입니다. 그들이 웹 사이트를 방문 할 때마다 그들은 성취하기를 원하는 특정한 작업을 가지고 있으며 정말로 신속하게 필요한 것을 얻을 것으로 기대합니다. 그렇다면 어떻게 할 수 있습니까?

이상적인 사용자 사진 : 집을 짓는 것과 마찬가지로 웹 사이트를 구축하는 것은 견고한 기초로 시작됩니다. 그리고 훌륭한 웹 디자인을위한 기초는 사용자에 관한 지식입니다. 사용자 연구는 제품 디자인의 첫 번째 단계 중 하나 여야합니다. 사용자가 누구인지 그리고 그들이 무엇을 수행하고자하는지 정확히 알아낼 필요가 있습니다. 사용자가 원하는 사용자의 필요와 필요를 알고 있으면 기대치와 완벽하게 일치하는 사용자 여정을 만들 수 있습니다 (조사 결과를 안전하게 저장하십시오. 클라우드 스토리지 짐마자 그런 다음 철저히 수행합니다 사용자 테스트 그 목표를 달성했는지 확인합니다.

핵심 목표 주변의 경험을 정제하십시오. 이 웹 사이트에서 무엇을 달성하고 싶습니까? 이 질문에 대한 답변을 찾는 것은 모바일 웹 경험을 만들 때해야 할 또 다른 중요한 것입니다. 참여를 운전하고 사용자가 제품을 구매하거나 서비스에 가입하도록하십시오. 분명히 목표를 기술하고 사용자가해야 할 단계의 수를 어떻게 줄일 수 있는지 생각해보십시오.

02. 더 작은 공간에서 내용을 적용하십시오.

콘텐츠는 대부분의 웹 사이트에 대한 가치를 제공합니다. 사람들이 방문하는 주된 이유입니다. 모바일 웹 디자인에 관해서는 데스크톱 경험을 찍고 모바일에서 복제하는 것은 불가능합니다. 모바일 사용자와 함께 웹 사이트를 디자인하는 것이 중요합니다. 즉, 사용자의 화면 크기와 습관을 수용 할 수있는 콘텐츠 및 기능을 적응해야합니다. 그래서 이것을 달성하기 위해 어떤 단계를 취할 수 있습니까?

가로 스크롤을 피하십시오 : 사용자는 수직으로 스크롤링되지만 가로로 스크롤하는 사이트에 편안합니다. 그래서 컨텐츠를 보려면 수평 스크롤이 필요한 페이지가 없어야합니다. 고정 너비 요소는 수평 스크롤을 일으키는 공통적 인 이유 중 하나이므로 특정 뷰포트 너비에만 잘 표시되는 콘텐츠가 없음을 확인하십시오.

단일 열 레이아웃을 목표로합니다. 단일 열 레이아웃은 작은 화면에서 제한된 공간을 관리하고 세로 및 가로 모드간에 쉬운 크기 조정을 가능하게합니다.

사용자는 수직으로 스크롤링되지만 가로로 스크롤하는 사이트에 편안합니다. 그것이 수평 스크롤이 필요한 페이지가되어서는 안됩니다.

사용자가 확대 / 축소 할 필요가 없는지 확인하십시오. 텍스트를 읽거나 이미지를 볼 때 방문자가 쉽게 좌절 할 수 있습니다. 사용자가 크기를 변경할 필요가 없도록 모바일 사이트를 디자인하십시오.

읽기 쉬운 글꼴 크기 사용 : 11 점은 텍스트의 절대 최소 크기입니다. 이 크기를 통해 사용자는 확대 / 축소없이 일반적인 시야에서 텍스트를 읽을 수 있습니다.

잘 규모의 글꼴을 선택하십시오. 웹 사이트 경험이 읽기가 필요한 경우 Helvetica 또는 Roboto와 같은 SANS-Serif TypeFaces를 사용하는 것이 좋습니다.

An image showing two different sizes of touch target: the pair on the left are each smaller than the tip of a finger, while those on the right are each larger than the tip of a finger. — 실제로 손가락 끝에 적합한 크기의 터치 타겟을 디자인하십시오. 신용 : Apple. (이미지 크레디트 : 사과)

손가락 친화적 인 디자인 사용 : 모바일 사이트를 디자인 할 때 방문자가 마우스 화살표 대신 손가락을 사용하고 인간의 손가락 끝이 마우스 포인터보다 큽니다. 각 양방향 요소가 적절하게 크기가 지정된 손가락 친화적 인 인터페이스를 디자인하기 위해 노력하십시오.

MIT 터치 실습 연구 손가락 끝의 평균 크기가 8-10mm임을 발견했다. , 10mm x 10mm 좋은 최소 터치 타겟 크기를 만듭니다.

또한 터치 타겟 간의 상대적 거리를 고려하십시오. 대화 형 요소가 서로 너무 가까이있는 경우 모바일 사용자는 실수로 손가락으로 잘못된 버튼을 누를 수 있습니다. 일어나는 것을 방지하기 위해 버튼을 올바르게 크기를 올리고 충분한 공간을 추가하십시오.

제품 이미지 만들기 확장 가능 : 많은 연구에서 사람들이 주로 시각적으로 학습자라는 것을 입증했습니다. 대부분의 사람들은 그런 식으로 전달 될 때 개념을 이해하고 이해할 수 있습니다. 이는 웹 디자인의 이미지를 사용하는 이유는 핵심 메시지를 신속하게 요약하는 훌륭한 방법입니다.

고품질의 자산을 제공 할뿐만 아니라 사용자가 쉽게 자세하게 볼 수 있도록 확장 할 수 있도록 필수적입니다.

이미지는 전자 상거래 웹 사이트에서 중요한 역할을합니다 - 사람들은 결정을 내릴 때 제품 이미지에 의존합니다. 고품질의 자산을 제공 할뿐만 아니라 사용자가 쉽게 자세하게 볼 수 있도록 확장 할 수 있도록 필수적입니다. 전체 이미지를 확장하십시오.

프로모션 및 광고에주의하십시오. 프로모션 및 광고는 콘텐츠를 쉽게 과장 할 수 있습니다. 광고의 메시지는 일부 방문객에게 작동하지만 대부분의 경우 사용자가 건너 뛰고 더 가치있는 정보로 이동합니다. 이 현상은 배너 실명이라고합니다.

연락처 정보를 쉽게 찾을 수 있습니다. 모바일 사용자는 종종 웹 사이트를 방문하여 연락처 정보를 찾습니다. 긴급성에 따라 사용자가 회사를 호출하고 연락처 양식을 작성하거나 주소를 찾을 수 있습니다. 전자 상거래 웹 사이트의 경우 홈 화면에서 전화 번호를 사용할 수 있어야합니다.

03. 스캔을위한 콘텐츠를 최적화합니다

사용자가 온라인에서 읽지 않는 것이 잘 알려지지 않은 사실입니다. 그들은 검사합니다. 새로운 방문자가 웹 페이지에 접근하면 해당하는 첫 번째 방법은 페이지를 검사하고 내용을 소화 가능한 정보로 나눕니다. 몇 가지 간단한 규칙을 따르면이 작업을 더 쉽게 할 수 있습니다.

페이지에 콘텐츠를 제공하는 순서를 명심하십시오. 사람들은 위에서 아래로 읽습니다. 그렇기 때문에 페이지 상단의 중요한 물건을 보존하고 계층 구조에 따라 나머지를 움직이는 것이 중요합니다.

혼란을 줄이십시오 : 사용자 인터페이스 요소를 통해 콘텐츠의 우선 순위를 지정합니다. 불필요한 기능성과 장식 요소를 제거하여 산만 함을 줄입니다. 최소한의 스타일을 만들기 위해 노력하여 사용자가 작업에 쉽게 집중할 수 있기 때문입니다.

이미지가없는 텍스트의 긴 블록을 피하십시오 : 그것은 많은 콘텐츠를 건너 뛰게 될 가능성이 높습니다. 표제, 단락 또는 글 머리 기호 포인트를 사용하여 텍스트를 분해하십시오.

중요한 요소에 더 시각적 인 무게를 두십시오. 주요 메시지 초점 포인트와 같은 중요한 요소를 만들어 방문자가 즉시 볼 수 있습니다. 다른 크기, 공백 또는 활기찬 색상을 사용하여 요소를 강조합니다.

04. 예측 가능한 탐색을 만듭니다

사용자가 탐색하는 데 도움이 모든 웹 사이트의 최우선 순위 여야합니다. 결국 사람들이 찾을 수없는 경우 가장 강력한 콘텐츠가 쓸모가 없습니다. 그래서 다음 단계 중 일부를 사용하여 솔리드 네비게이션 시스템 설계에 투자하는 것이 중요합니다.

친숙한 탐색 패턴 사용 : 웹 사이트의 탐색 메커니즘을 만드는 것이 간단한 규칙을 기억할 가치가 있습니다. 휠을 재발견하지 마십시오. 친숙한 경험을 창출하기 위해 노력하십시오. 대부분의 사용자가 자신만의 고유 한 네비게이션 시스템 (예 : 제스처 기반 탐색 시스템)을 만드는 것이 아니라 대부분의 사용자가 익숙한 탐색 패턴에 의존하는 것이 좋습니다. 익숙한 탐색을 만들 때 사용자가 제품과 상호 작용할 때 이전 경험을 원활하게 할 수 있도록 도와줍니다.

총 네비게이션 옵션 수에 한도를 입력하십시오. 메뉴에 너무 많은 옵션을 넣지 마십시오. 바탕 화면 사이트에서는 광범위한 메뉴가 잘 작동하지만 모바일 디자인에 맞지 않습니다. 모든 탐색 옵션이 화면의 가시 영역에서 사용할 수 있으므로 모바일 사용자가 옵션 목록을 스크롤하도록합니다. 가능한 가장 적은 메뉴 항목을 어떻게 제시 할 수 있는지 생각해보십시오. 이상적으로, 당신이 디자인하는 메뉴 별개의 범주가 7 개 이상이어야합니다 ...에

An image showing the navigation of ABC's mobile site – it focuses on a couple of core menu items, with everything else listed under a 'More' heading — ABC는 탐색 메뉴에서 최상위 우선 순위 옵션 만 제공합니다. 모든 보조 옵션은 '더보기'뒤에 숨겨져 있습니다. (이미지 크레디트 : ABC)

탐색 옵션의 우선 순위를 지정하십시오 : 사용자가 기능을 사용하는 방식을 기반으로 탐색을 구성합니다. 전역 메뉴에서 가장 인기있는 탐색 옵션은 상단에서 가야하며 기본 작업은 화면의 가시 영역에서 사용할 수 있어야합니다.

명확한 레이블 쓰기 : 각 탐색 옵션에는 명확하고 간결한 레이블이 있어야합니다. 전문 용어를 피하십시오 - 당신이 디자인하는 네비게이션은 방문자가 이해하지 못할 조건을 포함해서는 안됩니다. 명확한 레이블은 방문객에게 자신의 행동의 결과를 예측할 수있는 능력을 제공합니다.

대화 형 요소가 대화 형 요소처럼 보이는지 확인하십시오 : 버튼과 링크를 설계 할 때 설계가 어떻게 통신하는지 생각해보십시오. 사용자는 요소를 대화식 객체로 어떻게 이해합니까? 객체가 보이는 방식으로 사용자에게 사용하는 방법을 알려줍니다. 링크 또는 단추처럼 보이지만 대화식이 아니지만 단추가 아닌 밑줄이 그어진 단어와 같은 밑줄이 그어진 단어와 같은 밑줄이 그어진 단어와 같이 사용자가 쉽게 사용자를 혼동 할 수 있습니다.

현재 위치를 전달하십시오 : "내가 어디 있지?" 사용자가 효과적으로 탐색하기 위해 답변이 필요한 근본적인 질문입니다. 현재 위치를 명확하게 나타냅니다.

An image of the ASOS mobile site navigation – the search icon appear prominently on the main navigation. — ASOS는 모바일 웹 사이트의 화면 상단에서 검색을합니다. (이미지 크레디트 : ASOS)

검색 기능 제공 : 많은 콘텐츠 또는 기능을 사용하여 복잡한 사이트를 디자인하는 경우 쉽게 탐색 할 수 있도록 검색 창을 제공해야합니다. 검색 기능을 구현함으로써 특정 질문을 염두에두고 사이트에 오는 모바일 사용자를위한 정보 / 기능에 대한 빠른 경로를 제공합니다.

메뉴에서 검색 옵션을 숨기지 마십시오. 방문자가 귀하의 페이지에서 볼 수있는 첫 번째 것들 중 하나 여야합니다.

사용자가 홈페이지로 돌아갈 수 있도록하십시오. 방문객들은 페이지 상단의 로고를 탭하면 홈페이지로 돌아가서 작동하지 않으면 좌절감이 될 것으로 기대합니다.

단일 창에 사용자를 보관하십시오. 새 창에 사용자를 보내는 통화를 피하십시오. 일부 사용자는 모바일 브라우저에서 Windows를 전환하는 데 어려움을 겪고 이전 페이지를 찾을 수 없을 수도 있습니다.

05.로드 블록을 만드는 것을 피하십시오

RoadBlocks 마찰과 마찰을 만드는 것은 최악의 전환입니다. 다행히도, 당신이 그들을 깎기 위해 할 수있는 간단한 것들이 있습니다.

방문자를 방해하지 마십시오. 대형 팝업은 웹 경험에서 가장 일반적인 유형의 중단 중 하나입니다. 오랫동안 그러한 배너는 프로모션 메시지에 전념했지만 최근에는 많은 사이트가 쿠키 (GDPR)를 사용할 수있는 권한을 얻기 위해 산만 한 팝업을 사용하기 시작했습니다. 방문자에게 어떤 정보를 보여주고 싶은지 상관없이 전반적인 경험을 산만하지 않도록하십시오.

사용자가 웹 사이트를 남기지 않도록하십시오. 사용자가 사이트 밖에서 찾아 보이는 사용자 여행의 장소를 식별 한 다음 사이트에 보관할 수있는 콘텐츠 / 기능을 제공 할 수 있습니다. 전자 상거래 웹 사이트의 프로모션 코드 필드는 아마도 방문자가 쿠폰을 찾으려고 시도한 시도에 사이트를 남겨 두는 가장 일반적인 예제 일 것입니다. 그러한 행동을 막기 위해 사이트에서 쿠폰을 바로 제공하는 것이 훨씬 낫습니다.

사용자가 가입하도록 강요하지 마십시오. 요구 사항을 요구하거나 온라인 서비스를 사용하기 전에 등록하기 전에는 상호 작용 비용이 높습니다. 사용자가 사이트를 포기하도록합니다 ...에 개인 정보를 제공하기 전에 방문객들은 사이트가 제공하는 것의 감각을 갖고 싶습니다.

변환에 대한 장벽이 가장 적은 사용자 흐름을 만들려면 모바일 사이트를 사용하여 방문자가 등록 할 필요없이 콘텐츠를 탐색 할 수 있습니다. 전자 상거래 웹 사이트의 경우 사용자가 손님으로 구매할 수있게하는 것이 필수적입니다.

여행을 계속하기 위해 다른 장치로 전환하기 쉽게하십시오. 모바일을 독립형 경험으로 간주하지 마십시오. 일반적인 사용자는 데스크탑, 휴대 전화 및 태블릿과 같은 여러 장치를 가지고 있으며 제품을 사용할 때 모든 장치에서 원활한 경험을 갖기를 기대합니다. 예를 들어 많은 사람들이 모바일 장치를 제품 검색을 위해서만 사용한 다음 바탕 화면으로 전환하여 변환합니다. 사용자는 모바일에서 멈춘 곳에서 여행을 계속할 것으로 기대합니다.

다음은 사용자의 현재 진행 상황을 동기화하기 위해 할 수있는 몇 가지 사항입니다.

사용자 계정에 대한 위시리스트, 즐겨 찾기 및 바구니를 동기화하십시오.
등록되지 않은 사용자를위한 장치간에 정보를 저장하거나 공유 할 수있는 방법을 제공합니다 (예 : 전자 메일에 링크를 보내는 옵션).

06. 설계 효율적인 양식

양식 항목은 웹에서 가장 일반적인 작업 중 하나입니다. 사용자가 어떤 종류의 형태를 작성할 필요가없는 경험을 상상하기가 어렵습니다. 그것이 유비쿼터스 관행이기 때문에, 통증이없는 형태를 작성하는 능력은 사용자를 유지하는 데 중요합니다. 다음은 마찰을 최소한으로 유지하는 데 도움이되는 몇 가지 팁입니다.

양식의 입력 최소화 : 일반적으로 사용자가 제공해야 할 데이터가 적을수록 웹 경험을 즐길 수 있습니다. 이러한 포인터는 키 입력을 줄이고 사용자가 다음을 수행 해야하는 데 도움이됩니다.

총 필드 수를 최소화하십시오. 불필요한 필드를 제거하여 가능한 한 짧고 간단하게 양식을 짧게 유지하십시오. 당신이 정말로 알 필요가있는 것만 물어보십시오.
자동 정확하고 자동 대문자화 및 자동 완성을 사용하여 사용자 오류 확률을 줄입니다.
드롭 다운 필드를 피하십시오. DropDowns 옵션을 숨 깁니다. 이렇게하면 추가 상호 작용 비용이 생성됩니다. 사용자는 두 번 활성화하여 올바른 옵션을 선택해야합니다. 옵션을 선택하는 데 드롭 다운 필드를 사용하는 경우 라디오 버튼으로 교체하는 것이 좋습니다.
사용자가 리턴을 누를 때 자동으로 다음 필드로 이동합니다.
실시간 인라인 유효성 검사로 양식 오류를 최소화하십시오.
기존 정보를 사용하여 편의성을 극대화하십시오. 예를 들어 등록 된 사용자의 배송 주소 또는 청구 정보와 같은 일부 필드를 미리 채울 수 있습니다.
대체 입력 메커니즘을 제공하는 것에 대해 생각해보십시오. 더 나은 사용자 경험을 제공하기 위해 어떤 장치 기능을 사용할 수 있는지 고려하십시오. 예를 들어, 사용자가 신용 카드 세부 정보를 입력하도록 요청하는 대신 장치의 카메라를 사용하여 카드를 검사하고 Apple Pay 및 Google Pay와 같은 시스템을 통합하여 하나의 탭으로 지불을 가능하게하는 옵션을 제공합니다.

An image showing the reasons customers abandon baskets during checkouts; the second most common reason, given by 27% of respondents, is that the checkout process was too long / complicated. — Baymard Institute에 따른 체크 아웃 중에 포기하는 이유 (이미지 크레디트 : Baymard Institute)

일치 키보드 제공 : 모바일 사용자는 필드에 적합한 키보드를 제공하는 웹 사이트를 알 수 있습니다. 이 기능은 추가 작업을 수행하지 못하도록합니다. 예를 들어 사용자가 전화 번호를 입력 해야하는 경우 웹 사이트는 숫자 0에서 9 키패드를 표시해야합니다.

올바른 키패드를 표시하려면 HTML 입력 유형을 설정하십시오. 여기서 양식 디자인과 관련된 7 가지 입력 유형이 있습니다.

입력 유형 = "텍스트" 모바일 장치의 일반 키보드를 표시합니다.
입력 유형 = "이메일" 일반 키보드와 '@'및 '.com'을 표시합니다.
입력 유형 = "TEL" 숫자 0에서 9 키패드를 표시합니다.
입력 유형 = "번호" 숫자와 기호가있는 키보드를 표시합니다.
입력 유형 = "날짜" 모바일 장치의 날짜 선택기를 표시합니다.
입력 유형 = "datetime" 모바일 장치의 날짜와 시간 선택기를 표시합니다.
입력 유형 = "월" 모바일 장치의 월 및 연도 선택기를 표시합니다.

사용자가 위치 필드를 수정하도록하십시오. 많은 웹 사이트는 사용자 위치를 자동으로 감지 하고이 정보를 사용하여 관련 콘텐츠를 제공합니다. 어떤 경우에는 사용자가 다른 장소에 대한 결과를보고 싶어 할 수 있기 때문에 사용자가 위치를 변경할 수있게하는 것이 필수적입니다.

07. 일관된 경험을 창출하기 위해 노력하십시오

일관성은 사용자 경험의 핵심 기둥 중 하나입니다. 일관된 디자인은 사용자 친화적 인 디자인입니다. 일관된 디자인을 만드는 데 초점을 맞추면 더 직관적 인 디자인을 만듭니다. 항상 내부적으로 그리고 외부 적으로 일관되게 웹 사이트를 만들기 위해 노력하십시오.

내적 일관성: 일관된 디자인 자산 라이브러리를 만들고 웹 사이트의 모든 페이지에 사용하십시오. 글꼴, 단추, 링크, 아이콘 및 다른 모든 UI 요소는 시력 일관성을 유지하기 위해 웹 사이트 전체에서 일관성을 유지해야합니다.

외부 일관성 : 디자인 웹 사이트가 더 큰 제품군의 일부로 보이는지 확인하십시오. 예를 들어 모바일 앱이있는 경우 모바일 웹 사이트는 사용하는 사용자에게 익숙하지 않아야합니다.

08. 최고의 모바일 사이트를 만드십시오

여기에 언급 된 모든 포인트는 업계 모범 사례로 간주 될 수 있습니다. 그러나 무언가를 '모범 사례'라고 불리기 때문에 그것은 당신의 웹 사이트에 대한 최적의 솔루션이라는 것을 의미하지는 않습니다. 그래서 디자인 결정을 테스트하는 것이 항상 중요합니다. 유용성을 설계 프로세스의 필수 부분을 테스트하고 정기적으로 경험을 향상시킵니다.

이 기사는 원래 문제 317에서 출판되었습니다 그물 웹 디자이너 및 개발자를위한 세계 최고의 잡지. 구매 317. 또는 Net에 가입하십시오 ...에

관련 기사:

모바일 UI 디자인의 얼굴을 바꾸는 6 가지 추세
더 나은 모바일 UX 디자인을위한 10 가지 팁
사용자 친화적 인 모바일 인터페이스를 디자인하는 방법

모바일 디자인의 8 개의 황금 규칙

01. 목표 지향적 인 경험을 구축하십시오

02. 더 작은 공간에서 내용을 적용하십시오.

03. 스캔을위한 콘텐츠를 최적화합니다

04. 예측 가능한 탐색을 만듭니다

05.로드 블록을 만드는 것을 피하십시오

06. 설계 효율적인 양식

07. 일관된 경험을 창출하기 위해 노력하십시오

08. 최고의 모바일 사이트를 만드십시오

어떻게 - 가장 인기있는 기사

캔버스를 늘리고 오일 페인트에 설치하는 방법

개를 그리는 법

귀하의 사이트에 대한 알렉사 스킬을 만드는 방법

사용자 친화적 인 웹 양식 만들기위한 10 가지 규칙

WordPress API를 사용하여 블로그 전원

사용자 행동에 영향을 미치는 7 개의 킬러 방법

웹 디자인 기관의 이름을 지정하는 방법

10 톱 Houdini 자습서

카테고리