네이버 웨일은 일반적인 브라우저 창과 탭 외에 사이드바, 스페이스 및 모바일창 등 다양한 웹 뷰 영역을 제공합니다. 이 영역들을 확장앱 API 를 사용하지 않아도 HTML 및 JavaScript 코드로 활용할 수 있습니다.
웨일 2.0 이후 버전부터 사용할 수 있는 기능입니다.
rel 속성
HTML 규격에서 rel 속성은 현재 문서와 대상 문서의 관계를 정의하는 속성으로 <a>, <area>, <link> 요소에 사용할 수 있습니다. <a>, <area> 와 같은 링크 요소에 사용할 경우 어떤 종류의 링크를 만들 것인지를 제어하는 역할을 합니다. 이 속성에는 널리 알려져있는 noopener, noreferer 를 포함하여 다양한 링크 형식을 설정할 수 있습니다. 웨일에서는 표준 링크 형식 외에도 아래 값을 지정하여 웨일만의 기능을 활용할 수 있습니다.
링크 형식
설명
사용할 수 있는 요소
사용할 수 없는 요소
whale-sidebar
링크를 사이드바 가변 패널로 엽니다
target 속성과 함께 사용하면 둘 이상의 가변 패널을 생성할 수 있습니다.
target 속성을 지정하지 않거나 target="_blank"로 지정한 경우 새로운 패널을 열지 않고 이미 열려있는 패널을 재사용합니다.
<a>,<area>
<link>
whale-space
링크를 웨일 스페이스에 엽니다. 이미 웨일 스페이스에 다른 페이지가 열려있는 경우 같은 영역을 재사용하여 페이지를 이동합니다.
스페이스 연결 끊기로 분리된 상태에서도 동일한 규칙으로 동작합니다.
<a>,<area>
<link>
whale-mobile
링크를 새 모바일창으로 엽니다.
target 속성과 상관없이 항상 새 창으로 열립니다.
<a>,<area>
<link>
web-app
링크를 웹 앱창으로 엽니다.
웹 앱창은 일반 창 혹은 모바일창과 구별되는 인터페이스를 제공합니다. 항상 위에 표시, 투명도 조절 등의 기능을 갖습니다.
링크(대상) 페이지에 Web App Manifest가 정의되어 있는 경우 웹 앱 설치를 유도하는 인터페이스가 표시됩니다.
Manifest 가 정의되어 있지 않은 보통의 웹 페이지인 경우 바로가기 앱(Shortcut App)으로 설치를 유도합니다.
<a>,<area>
<link>
웨일에서 제공하는 링크 형식들이 결국 링크를 표시할 대상을 가리키고 있다는 점에서 “왜 target 속성을 사용하지 않는가?” 라는 의문을 가질 수 있습니다. target 속성을 확장하면 해당 링크 요소는 웨일 이외의 브라우저에서 새 창 열기로 동작하므로 표준 웹 규격에서 기대하는 동작을 해칠 수 있습니다. 현대 HTML 표준 규격에서도 rel 속성은 링크 요소의 기능을 설정한다고 정의하고 있는 만큼 웹 표준과 호환성을 고려할 때 target이 아닌 rel 속성을 확장하는 것이 적합합니다.
HTML
<a>, <area> 요소에 rel 속성에 위 링크 형식 중 하나를 추가하여 사용할 수 있습니다. rel 속성은 noopener, noreferrer 등 표준 규격에 포함된 다른 링크 형식과 함께 사용할 수 있습니다.