Visited state, Hover state, Mosaic의 보라색

Visited 의 보라색의 기원

1993년 NCSA Mosaic 브라우저, 세계 최초의 그래픽 웹 브라우저가 처음으로 링크 색을 정의했습니다.

• 미방문 링크: 파란색 (#0000FF).
• 방문 링크: 보라색 (#551A8B).
• 활성 링크: 빨간색 (잠깐).

보라색을 선택한 이유는 명확한 기록이 없지만, 빨강(이미 방문)과 파랑(미방문)의 중간 색으로 자연스러웠다는 설이 있습니다.

이 색이 30년 동안 웹의 표준이었습니다. 검색 결과를 본 사용자는 보라색 링크를 "이미 본 페이지"로 즉시 인식합니다.

CSS에서

a:link { color: blue; }       /* 미방문 */
a:visited { color: purple; }   /* 방문 */
a:hover { color: red; }        /* 호버 */
a:active { color: orange; }    /* 누르는 순간 */

순서는 L-V-H-A (LoVe-HAte)입니다. 이 순서를 지키지 않으면 일부 상태가 적용 안 됩니다 (CSS specificity 때문입니다).

프라이버시 제한

2010년경 브라우저들이 :visited 의 적용 가능 속성을 제한했습니다. 이유는 악의적 사이트가 사용자의 방문 기록을 알아낼 수 있었기 때문입니다.

지금 :visited에 적용 가능한 속성:

• color.
• background-color (단, 알파 없는 색만).
• 일부 border 속성.

다른 속성(폰트 크기, 그림자 등)은 무시됩니다.

모던 디자인의 visited

많은 모던 사이트가 visited 색을 따로 정의하지 않습니다. 평범한 색에 사용자 학습을 더하는 방식입니다. 검색 결과 페이지(Google, 네이버)는 여전히 보라색입니다.

바이브 메이커가 챙길 한 가지

검색 결과 같은 리스트형 콘텐츠가 본인 사이트에 있다면 visited 색을 다르게 정의합시다. 사용자가 같은 링크를 두 번 클릭하지 않게 합니다.

관련

States · Hover state · Browser icons