링크, 이렇게 합니다.

엔트리중에 링크가 포함될 경우가 많은데, 몇가지 원칙을 생각해 보았습니다. 가장 중요하게 생각할 것은 “링크를 클릭하는 사람이 명확하게 무엇을 하고 있는지에 대한 확신을 주자”는 것입니다.

• 링크는 명확하게 링크임을 알수 있도록.

  지금도 잘 하고 있긴 하지만, 링크가 걸린 텍스트 또는 그림은 명확하게 링크임을 알 수 있도록 해야겠다. 그러기 위해서는 일단 링크를 링크가 아닌것처럼 보이게해서도 안되고 반대로 링크가 아닌것이 링크처럼 보이게 해서도 안되겠습니다. “색글씨과 밑줄”이 전형적인 링크의 –젤리님이 알려주신바에 따르면- 어포던스다. 살짝 모양을 내기 위해 점선을 긋고 마우스를 대면 실선으로 바뀌게 해놓았는데, 보기에 괜찮다 …하시더라-_-;

• 방문했던 곳을 다르게 표시하자

  한번 방문했던 곳은 링크의 색이나 모양을 다르게 해서 클릭을 할것인지 판단하는데 더 많은 정보를 제공합니다. 방문하지 않았던 곳은 점선링크에 마우스를 대면 실선으로 바뀌게 되고, 방문했던 곳은 약간 탁한 글씨색에 마우스를 대도 변하지 않는 점선을 사용했습니다.

• 타겟지정하지 않음

  얼마전까지의 거의 모든 링크에는 target=”_blank” 속성을 사용함으로써 클릭했을 때 새로운 창을 띄워서 이동하도록 했었습니다. 이 방법의 장점-이라고 생각했던 것-은 클릭하기전의 페이지로 돌아오는 수고를 덜어주고자 하는 목적-이라고는 하지만 사실은 내 사이트에서 떠나는 꼴을 못봐주겠다는(-_-) 의도-가 있습니다. 링크를 Shift+클릭 하면 새로운 창에서 링크된 주소를 열수 있으니 사용자가 결정하도록 해주자. 클릭을 하는 행동에는 “새로운 페이지로 이동한다”는 기대는 있지만 “새로운 브라우저가 뜬다”는 것까지 방문자가 동의했다고는 볼 수 없습니다. 새창띄우기에 대한 이야기는 제이콥닐슨의 The Top Ten New Mistakes of Web Design의 2번째 항목인 “Opening New Browser Windows”에 나와있습니다. 나머지 9개의 웹디자인에서의 실수들도 읽어볼만합니다.

• link title 속성을 사용.

  <a>태그 안에 title이라는 속성을 줄 수 있습니다. 링크 위에 마우스를 댔을때 title에 적은 내용이 상자로 나옵니다. 바로 윗줄에 있는 The Top Ten New Mistakes of Web Design에 마우스를 대면 설명이 나오는걸 확인하세요. title속성을 이용해서 클릭을 했을때 어떤 페이지가 열릴 것인지에 대한 정보를 좀 더 줄수 있습니다. 외부사이트를 링크한 것이면 해당사이트의 URL + 타이틀 정도를 넣어줄 수도 있고 간단하게 한두줄 정도 해당사이트의 내용을 미리 보여줘도 괜찮을듯 합니다. 다만 클릭했을때 어떤 내용이 열릴지를 짐작할수 있는 링크에는 넣지 않아도 되겠습니다. “문장 (via 아무개)” 에서 “아무개”를 클릭하면 ‘바로 앞 문장에 대한 내용을 아무개가 이야기했구나’를 짐작할 수 있다고 보기때문에 이 상황에서는 title태그를 안 써도 됩니다. 또한 “여기”라는 문장에 링크거는 것을 가능한 피함으로써 title 속성을 쓰지 않고도 더욱 명확하게 링크의 목적지를 표시해주는게 좋습니다. 예를 들자면 “더 많은 정보는 “여기”에 있습니다” 보다는 “더 많은 정보는 “ㅇㅇㅇ를 제대로 하는법”에 있습니다.”가 클릭하는 사람에게 더 편안함을 준다는 것이죠.
  link title에 대한 내용은 Using Link Titles to Help Users Predict Where They Are Going을 참고하세요.

• 딥링크의 사용.

  링크를 거는 상대방 사이트에서 특별한 제한을 두고 있지 않은한 관련내용으로 직접 연결할 수 있는 딥링크를 사용할 것입니다. 딥링크를 금지하는 사이트에 대한 ZDNet Korea의 기사를 보면 섬짓하긴 하지만 딥링크를 명시적으로 거부하고 있는 곳은 별로 없어보입니다. 딥링크를 제공함으로써 방문객이 여러차례 클릭을 해서 원하는 문서를 찾는 수고를 덜 수 있습니다. “무슨무슨 사이트”에서 말했듯이…라는 문장에 링크를 걸었다면 그 사이트의 초기화면에 링크를 걸 것이 아니라 그 문서에 바로 링크를 걸어줌으로써 하이퍼링크의 가치를 최대한 살릴 수 있습니다. 다만 해당사이트가 프레임등으로 구성되어 그 프레임안의 문서에는 해당사이트에서 제공하는 항목들이 일부 빠져있을 경우 (사이트이름, 로고, 저작권, 연락처, 등등..)에는 주의를 필요로 하겠습니다.

  또한 블로그는 구성이 일반적인 웹사이트처럼 메뉴를 트리구조로 되어있는 것이 아니라 시간순서대로 작성하는 로그의 모음이므로 특정한 문서로 찾아가는 경로를 추측해내기가 어려움이 있는데 많은 블로그에서는 퍼머링크를 제공하여 해당 엔트리의 고유한 주소를 공개하고 있으므로 블로그를 인용하고 링크를 걸 때에는 퍼머링크(딥링크)를 이용하는 것은 자연스러운 일입니다.

  (검색하다가 찾은 곳인데 딥링크를 금지하고 있는 모 외국계은행의 하이퍼링크 정책은 여러모로 참고가 될만합니다. 딥링크는 물론이려니와 단순한 메인페이지로의 링크도 서면허락을 받아야 한다고 규정하고 있습니다. 하이퍼링크를 걸기 위하여 이 은행의 이미지와 로고,상호 등을 사용하는 것도 예외적인 상황을 제외하고는 금지하고 있습니다. 링크를 금지하고 있어서 그냥 텍스트로 적겠습니다. http://www.kr.hsbc.com 로 가서 오른쪽 아래에 있는 하이퍼링크정책 을 열어보기 바랍니다. 뭐라고 더 쓰고는 싶은데 당최 무서워서 -_-; )