긴 형식의 콘텐츠를 탐색하는 것은 높은 건물에서 계단을 오르는 것과 마찬가지로 어려울 수 있습니다. 엘리베이터가 목적지 층으로 바로 이동할 수 있는 것처럼, 인페이지 링크는 사용자가 단 한 번의 클릭으로 페이지 콘텐츠를 탐색할 수 있도록 도와줍니다. 정의 : 페이지 내 링크 ( 점프 링크 또는 앵커 링크 라고도 함 )는 사용자를 동일한 페이지의 특정 섹션으로 연결하는 링크입니다. 페이지 내 링크는 키보드 사용자를 위한 맨 위로 이동 링크 또는 콘텐츠로 건너뛰기 링크와 같은 다양한 용도로 사용될 수 있지만 가장 일반적인 용도 중 하나는 목차입니다. 일반적으로 정보가 풍부한 페이지 상단에 있는 목차는 해당 페이지에 있는 콘텐츠 주제의 구조화된 목록을 제공하므로 사용자는 클릭하여 원하는 섹션으로 직접 이동할 수 있습니다. 목차에 대한 대체 형식(예: 아코디언 , 고정 탐색 모음 ) 이 있지만 이 문서에서는 페이지 내 링크를 사용한 구현에만 중점을 둡니다. 이 기사 내에서 쉽게 탐색할 수 있도록 아래 섹션에는 기사의 특정 부분으로 이동할 수 있는 페이지 내 링크 목록도 제공됩니다. 이 페이지에서: 연구 결과: 페이지 내 링크에 대한 사용자 인식 페이지 내 링크가 여전히 혼란스럽나요? 사용자는 페이지 내 링크를 어떻게 인식합니까? 사용자는 페이지 내 링크를 어떻게 사용합니까? 페이지 내 링크: 사용 또는 통과? 대안: 아코디언과 탭 결론 연구 결과: 페이지 내 링크에 대한 사용자 인식 콘텐츠 탐색을 용이하게 하는 기능에도 불구하고, 페이지 내 링크는 링크의 정신 모델을 무너뜨리기 때문에 역사적으로 사용성 문제를 제기해 왔습니다. 전통적으로 웹에서는 링크가 외부 페이지로 연결됩니다. 이러한 이유로 인페이지 링크가 웹에 처음 등장했을 때 우리는 이를 피하는 것이 좋습니다. 그러나 인페이지 링크의 보급이 증가함에 따라 이 디자인 패턴에 대한 친숙도도 높아지고 있습니다. 몇 년 전, 우리는 인페이지 링크의 사용을 재평가 하고 그 구현에 대한 지침을 제공했습니다(현재에도 여전히 적용 가능). 사람들이 긴 콘텐츠 페이지를 읽는 방법에 대한 가장 최근 연구에서 우리는 참가자들이 자연스럽게 목차 링크에 참여하는 것을 관찰했습니다. 이러한 행동은 상호 작용 패턴에 대한 인식과 이해가 향상되었음을 보여줍니다. 많은 연구 참여자들이 목차의 페이지 내 링크를 사용하고, 댓글을 달고, 높이 평가했습니다 . 아래에서는 몇 가지 주요 연구 결과를 강조합니다. 페이지 내 링크가 여전히 혼란스럽나요? 연령에 관계없이 대부분의 연구 참가자는 인페이지 링크에 익숙했습니다. 참가자 11명 중 2명만이 인페이지 링크가 제시되었을 때 해당 링크에 참여하지 않은 것으로 나타났습니다. 친숙함에도 불구하고 인페이지 링크는 의도적으로 형식을 지정하지 않으면 여전히 사용자를 놀라게 할 수 있습니다. 페이지 내 링크를 능숙하게 사용하여 다른 두 페이지를 탐색한 한 참가자는 Phone Arena 페이지의 페이지 내 링크를 통해 다른 페이지로 이동할 수 있을 것으로 예상했습니다. 혼란은 Phone Arena 페이지에서 이러한 링크의 스타일이 지정되었기 때문에 발생했을 수 있습니다. 이 링크는 자세히 보기 섹션 바로 위에 있었고 다른 페이지로 연결되는 일반 링크와 똑같아 보였습니다. 두 섹션의 근접성 과 유사성으로 인해 그녀는 두 섹션의 링크가 동일한 목적에 사용된다고 생각하게 되었을 가능성이 높습니다 . 자세히 보기 섹션 바로 위에 목차가 표시된 Phone Arena의 모바일 스크린샷 Phone Arena: 한 참가자는 목차 아래 나열된 페이지 내 링크로 인해 다른 페이지로 연결될 것이라고 생각하여 혼란스러워했습니다. 사용자는 페이지 내 링크를 어떻게 인식합니까? 다른 링크와 마찬가지로 링크의 적절한 스타일을 통해 클릭 가능성을 나타내는 것이 중요합니다 . 또한 사용자는 링크가 현재 페이지에 계속 표시되는지 여부를 알 수 있어야 합니다. 이는 때때로 Healthline 기사의 경우와 같이 상황별 단서를 통해 수행될 수 있습니다. 여기서 참가자는 기사 제목 아래의 링크가 기사 제목과 직접 관련되어 있기 때문에 페이지 내 링크라고 추론할 수 있었습니다. 그러나 대부분의 시나리오에서는 명확하지 않습니다. 따라서 사용자가 페이지 내 링크를 식별하는 데 도움이 되도록 목차 또는 이 페이지와 같은 레이블을 사용하는 것이 좋습니다 . 한 연구 참가자는 Healthline.com의 기사 페이지에서 페이지 내 링크를 발견했을 때 자신의 사고 과정을 공유했습니다. 사용자는 페이지 내 링크를 어떻게 사용합니까? 한 연구 참가자는 기사를 탐색하면서 목차에 대해 다음과 같이 말했습니다. 여기 제목의 해당 섹션이 마음에 듭니다. 이러한 종류의 정보는 기사의 개요를 제공하므로 특정 정보만 찾고 있는 경우 전체를 스크롤할 필요 없이 특정 섹션으로 이동할 수 있습니다. 이 인용문은 페이지 내 링크가 포함된 목차가 유용한 두 가지 방법을 강조합니다. 사용자가 관련 섹션으로 건너뛸 수 있도록 허용 페이지 콘텐츠의 개요를 제공하세요. 사용자가 관련 섹션으로 건너뛰도록 허용 사람들은 웹 페이지에서 거의 읽지 않습니다 . 몇몇 참가자들은 페이지 내 링크가 관심 없는 콘텐츠를 건너뛰는 데 도움이 되었고 관련 없는 정보가 가득한 화면을 스크롤하는 것을 피할 수 있게 되었다고 말했습니다. 페이지의 특정 섹션에 직접 액세스할 수 있으면 스크롤이 최소화되고 사용자가 보다 효율적으로 탐색할 수 있습니다. 연구에서 우리는 작업을 분산시켰습니다 . 참가자들에게 먼저 페이지를 탐색하도록 요청한 다음 더 지시적인 작업을 제공했습니다. 우리는 사용자가 초기 탐색에서 인페이지 링크를 건너뛰고 특정 정보가 필요할 때 인페이지 탐색 링크를 클릭하는 경향이 있음을 관찰했습니다 . 예를 들어, 한 참가자는 우리가 스마트폰 리뷰를 살펴보라고 요청했을 때 목차 링크를 사용하거나 이에 대해 언급하지 않았습니다. 나중에 그는 두 휴대폰의 카메라 기능을 비교해야 했을 때 즉시 목차로 이동하여 페이지 내 링크를 클릭하여 올바른 섹션으로 이동했습니다. 우리는 여러 웹사이트의 다양한 참여자에게서 이 동작이 반복되는 것을 관찰했습니다. 페이지 콘텐츠의 개요 제공 페이지 내 링크가 페이지 상단에 표시되면 여러 연구 참가자가 콘텐츠를 탐색하기 전에 목록을 검토하는 데 시간을 보냈습니다. 콘텐츠에 대한 전면적인 개요를 통해 사용자는 페이지의 정신적 모델을 형성 하고 페이지가 자신의 정보 요구 사항을 충족하는지 신속하게 평가하여 계속 스크롤할 이유를 제공 할 수 있습니다 . Nerd Wallet 웹사이트의 목차 스크린샷 Nerd Wallet: 한 참가자는 이 페이지의 목차 링크에 대해 긍정적인 의견을 공유했습니다. 그러면 페이지 아래에서 무엇을 기대할 수 있는지에 대한 빠른 [아이디어]를 얻을 수 있습니다. 나는 그것들이 링크라는 것을 알았습니다. 그래서 만약 제가 그 중 하나로 바로 점프하고 싶다면 그렇게 할 것입니다. 그런데 하나하나 순차적으로 살펴보고 싶었어요. 하지만 예, 페이지 아래에서 어느 정도까지 어떤 정보를 찾을 수 있는지 알려줍니다. 항상 좋은 정보입니다. … 목차와 같습니다. 페이지 내 링크: 사용 또는 통과? 인페이지 링크의 가치를 극대화하려면 디자인에 통합하기 전에 다음 측면을 고려하세요. 페이지 길이 인페이지 링크는 긴 형식의 콘텐츠에 가장 유용합니다. 최소한의 정보가 포함된 짧은 페이지의 경우 사용자가 탐색을 위해 페이지 내 링크를 요구할 가능성은 거의 없습니다. 이러한 페이지에 페이지 내 링크가 포함된 목차를 포함하면 페이지에 불필요한 길이가 추가되고 콘텐츠가 스크롤 없이 볼 수 있는 부분 아래로 더 멀리 밀려날 수 있습니다. 짧은 페이지에서 불필요한 목차 사용을 보여주는 스크린샷 연금급여보증공사(PBGC): 이 페이지에는 몇 개의 간략한 섹션만 포함되어 있어 목차가 불필요하며 페이지 길이가 늘어납니다. 콘텐츠 단축 페이지 내 링크는 페이지 탐색을 용이하게 하는 유용한 도구이지만 콘텐츠는 여전히 경험의 핵심입니다. 긴 형식의 콘텐츠에 인페이지 링크 사용을 고려할 때 콘텐츠를 압축할 수 있는지 평가하세요. 더 짧고 스캔 가능한 콘텐츠는 전반적인 읽기 경험을 크게 향상시킵니다. 불필요한 세부 정보를 제거하면 페이지 길이를 줄이는 데 도움이 되며, 잠재적으로 페이지 내 목차가 불필요해질 수도 있습니다. 한 페이지와 여러 페이지 모든 것을 한 페이지에 표시하고 탐색을 위해 페이지 내 링크를 통합하는 것이 매력적으로 보일 수 있지만 이 디자인 선택에는 페이지가 너무 길고 로드 시간이 길다는 두 가지 중요한 단점이 있습니다. 이러한 단점은 다음과 같은 이유로 모바일 사용자에게 문제가 될 수 있습니다. 제한된 화면 크기로 인해 과도한 스크롤이 필요한 긴 페이지가 발생할 수 있습니다. 가변적인 연결 또는 제한된 데이터 요금제로 인해 페이지 성능이 저하됨 콘텐츠 레이아웃을 결정하는 방법은 페이지의 정보에 따라 달라집니다. 제시된 모든 정보가 자신의 요구 사항과 관련성이 높으면 사용자는 긴 페이지를 기꺼이 스크롤합니다. 그러나 페이지에 서로 관련이 먼 여러 주제가 포함되어 있는 경우 여러 페이지에 걸쳐 나누는 것이 더 실용적일 수 있습니다. 풍부한 콘텐츠가 포함된 매우 긴 페이지의 스크린샷 데이터 속 세상: 이 매우 긴 페이지(스크롤바 진행률로 표시됨)는 질병 퇴치에 대한 풍부한 연구 결과를 제공합니다. 페이지 내 링크는 콘텐츠 탐색을 용이하게 하기 위해 상단 요약과 각 섹션 모두에 사용됩니다. 스크롤 가능한 긴 페이지 하나에 정보를 표시하면 원활한 읽기 환경이 조성되지만 로딩 시간도 늘어날 수 있습니다. 논리적 청킹 페이지 내 링크를 페이지의 목차로 사용하려면 콘텐츠를 제목으로 요약할 수 있는 별개의 덩어리로 나누어야 합니다. 정보를 청킹하면 스캔 가능성과 이해력이 향상되지만 , 정보가 하나의 응집력 있는 본문으로 더 잘 표현된다면 인페이지 링크는 유용하지 않습니다. Q&A 형식의 인터뷰 기사 스크린샷 AU 리뷰: 이 페이지에는 여러 인터뷰 대상자와의 인터뷰가 포함되어 있습니다. 인터뷰의 질문은 유기적으로 서로 결합되어 페이지를 덩어리로 나누기가 어렵습니다. 이 경우 페이지 내 링크가 포함된 목차는 유용하지 않습니다. 대안: 아코디언과 탭 아코디언과 탭은 긴 콘텐츠 페이지에 목차를 구현하기 위한 대체 디자인 패턴입니다. 페이지 내 링크, 아코디언, 탭 그림 아코디언과 탭은 페이지 내 목차의 대안입니다. 이 3가지 상호 작용 패턴은 몇 가지 유사한 특성을 공유합니다. 내용의 개요를 제공하는 목차 역할을 합니다. 콘텐츠에 대한 직접 액세스 촉진 여러 페이지에 걸쳐 있는 것이 아니라 동일한 페이지에서 콘텐츠를 관리합니다. 정보의 논리적 청크 필요 아래 표에는 차이점이 나와 있습니다. 페이지 내 링크 아코디언 탭 기능 항해 콘텐츠 구조화 페이지 길이 증가 감소 일부 콘텐츠는 기본적으로 숨겨져 있나요? 아니요 예 병렬 콘텐츠 섹션에 대한 액세스 예 아니요, 한 번에 하나의 아코디언만 열어 둘 수 있는 경우 아니요 주요 사용 사례 본문에 목차로 삽입됨 여러 개의 짧은 콘텐츠 섹션 형식 지정 몇 가지 더 긴 콘텐츠 섹션의 형식을 지정하는 경우 세 가지 중에서 아코디언은 모바일 사용 에서 빛을 발합니다 . 콘텐츠를 아래로 밀어내는 인페이지 링크와 달리 아코디언은 섹션 제목과 콘텐츠 컨테이너 컨트롤의 역할을 두 배로 늘려 페이지 길이를 줄입니다. 탭의 검색 가능성이 낮습니다. 대부분의 경우 사용자는 기본 탭의 콘텐츠에만 집중하고 다른 탭에 표시되는 정보는 무시하는 경향이 있습니다. 또한 탭을 사용하면 동시에 두 탭의 정보를 참조하기가 어렵습니다. 모바일에서는 탭 목록이 작은 화면에 완전히 맞지 않을 수 있으므로 디자이너는 라벨 잘림 또는 캐러셀의 일부 탭 숨기기와 같은 불완전한 솔루션에 의존해야 합니다. 이러한 디자인 패턴 중에서 선택할 때 사용자 목표를 평가하고 각 옵션의 이점과 장단점을 비교하십시오. 고려해야 할 두 가지 주요 질문은 다음과 같습니다. 페이지는 어떻게 사용되나요? 선택한 패턴이 사용자가 대안에 비해 목표를 더 잘 달성하는 데 도움이 됩니까? 한 가지 중요한 점은 디자인 패턴을 선택하기 전에 콘텐츠 구조와 형식이 먼저 이루어져야 한다는 것입니다 . 콘텐츠 구성의 우선순위를 정하면 더 나은 사용자 경험으로 이어지는 정보에 입각한 결정을 내릴 수 있습니다. 결론 페이지 내 링크를 기반으로 한 목차는 긴 형식의 콘텐츠를 탐색하는 데 유용한 도구입니다. 연구에 따르면 사용자는 이 디자인 패턴에 점점 더 익숙해지고 있습니다. 적절한 스타일과 레이블이 지정되면 인페이지 링크는 유용한 개요를 제공하고 특정 페이지 섹션에 빠르게 액세스할 수 있는 방법을 제공합니다. 인페이지 링크 구현 결정은 콘텐츠 구조와 사용자 요구 사항을 신중하게 고려하여 이루어져야 합니다. 의심스러운 경우 사용성 테스트를 수행하여 페이지 내 링크가 귀하의 페이지에 적합한지 평가하세요.