검수요청.png검수요청.png

"하이퍼링크"의 두 판 사이의 차이

위키원
이동: 둘러보기, 검색
2번째 줄: 2번째 줄:
  
 
==개요==
 
==개요==
하이퍼텍스트 문서 내의 하나의 단어나 구(phrase), 기호, 화상과 같은 요소와 그 문저 내의 다른 요소 또는 다른 하이퍼텍스트 문서 내의 다른 요소 사이의 연결을 의미하며 하이퍼텍스트 링크, 핫 링크라도고 한다. 하이퍼링크가 되어있는 것엔 밑줄이 있거나 다른 색상으로 구분되어 표시된다. 사용자가 링크된 요소를 클릭하면 하이퍼링크로 활성화된다. 하이퍼링크를 이용하면 같은 하이퍼 텍스트 문서 내의 한 요소와 다른 요소의 연결을 선택하여 검색할 수 있고, 다른 인터넷 호스트에 있는 월드 와이드 웹(WWW) 서버 상의 하이퍼텍스트 문서 내 다른 요소와의 연결을 선택하여 검색할 수도 있다. <ref name="사이언스올">〈[https://www.scienceall.com/%ED%95%98%EC%9D%B4%ED%8D%BC%EB%A7%81%ED%81%AChypertext/ 하이퍼링크(hypertext)]〉, 《사이언스올》</ref> 하이퍼링크를 사용할 경우 유의해야할 사항이 있다. 일반적으로 링크를 하는것은 저작권법에 위반되지않는다. 하지만 뉴스 기사를 긁어와서 개인 사이트(블로그나 카페 등등)에 올리는 행위는 저작권법 위반이므로 반드시 링크 스크랩을 해줘야한다. 왜냐하면 인터넷 신문 회사의 수익 구조는 조회수가 바로 광고 수입으로 직결되어 이를 통해 수익을 창출하는 구조로 이루어져 있기 때문에 조회수가 줄어들면 신문 회사의 수입이 줄어들게됨으로 경제적인 타격이 될 수 밖에 없다. 그렇기에 2005~2006년 경, 신문 회사들이 연합하여 뉴스 기사를 긁어 와서 타 사이트에 올리는 행위를 저작권법 위반으로 처벌해달라고 정부에 요청하였고, 이후 저작권법 개정안이 통과되어 이와 같은 행위가 불법으로 규정된것이다. <ref name="리그베다위키">〈[http://rigvedawiki.net/w/%ED%95%98%EC%9D%B4%ED%8D%BC%EB%A7%81%ED%81%AC 하이퍼링크]〉, 《리그베다위키》, 2015-03-28</ref>
+
하이퍼텍스트 문서 내의 하나의 단어나 구(phrase), 기호, 화상과 같은 요소와 그 문저 내의 다른 요소 또는 다른 하이퍼텍스트 문서 내의 다른 요소 사이의 연결을 의미하며 하이퍼텍스트 링크, 핫 링크라도고 한다. 하이퍼링크가 되어있는 것엔 밑줄이 있거나 다른 색상으로 구분되어 표시된다. 사용자가 링크된 요소를 클릭하면 하이퍼링크로 활성화된다. 하이퍼링크를 이용하면 같은 하이퍼 텍스트 문서 내의 한 요소와 다른 요소의 연결을 선택하여 검색할 수 있고, 다른 인터넷 호스트에 있는 월드 와이드 웹(WWW) 서버 상의 하이퍼텍스트 문서 내 다른 요소와의 연결을 선택하여 검색할 수도 있다. <ref name="사이언스올">〈[https://www.scienceall.com/%ED%95%98%EC%9D%B4%ED%8D%BC%EB%A7%81%ED%81%AChypertext/ 사이언스올, 하이퍼링크(hypertext)]〉, 《홈페이지》</ref> 하이퍼링크를 사용할 경우 유의해야할 사항이 있다. 일반적으로 링크를 하는것은 저작권법에 위반되지않는다. 하지만 뉴스 기사를 긁어와서 개인 사이트(블로그나 카페 등등)에 올리는 행위는 저작권법 위반이므로 반드시 링크 스크랩을 해줘야한다. 왜냐하면 인터넷 신문 회사의 수익 구조는 조회수가 바로 광고 수입으로 직결되어 이를 통해 수익을 창출하는 구조로 이루어져 있기 때문에 조회수가 줄어들면 신문 회사의 수입이 줄어들게됨으로 경제적인 타격이 될 수 밖에 없다. 그렇기에 2005~2006년 경, 신문 회사들이 연합하여 뉴스 기사를 긁어 와서 타 사이트에 올리는 행위를 저작권법 위반으로 처벌해달라고 정부에 요청하였고, 이후 저작권법 개정안이 통과되어 이와 같은 행위가 불법으로 규정된것이다. <ref name="리그베다위키">〈[http://rigvedawiki.net/w/%ED%95%98%EC%9D%B4%ED%8D%BC%EB%A7%81%ED%81%AC 리그베다위키, 하이퍼링크]〉, 《백과》, 2015-03-28</ref>
  
 
==등장배경==
 
==등장배경==
 
[[파일:테드_넬슨.jpg|썸네일|300픽셀|'''[[테드 넬슨]]'''(Ted Nelson)]]
 
[[파일:테드_넬슨.jpg|썸네일|300픽셀|'''[[테드 넬슨]]'''(Ted Nelson)]]
  
하이퍼링크(hyperlink)라는 용어는 1965년 쯤 [[테드 넬슨]](Ted Nelson = Nelson, Theodor H.)이 [[재너두 프로젝트]](Project Xanadu)를 시작하면서 고안되었다. 테드 넬슨은 배니버 부시의 유명한 논문인 As We May Think(우리가 생각하는 대로)에서 감명을 받았다. 이 논문에서 배니버 부시는 마이크로필름 기반의 머신 메멕스를 통해 사람은 어떠한 두 페이지의 정보를 관련 정보의 '꼬리(trail)'에 연결시켜 이 꼬리 속에 페이지 사이를 오고가며 마치 하나의 마이크로필름 두루마리에 있는 것처럼 할 수 있었다고 서술하였다. 우리에게 이와 가장 비슷한 것을 찾아본다면 한 토픽에 관련된 웹 페이지들의 즐겨찾기 목록을 만드는 작업을 예로 들 수 있다. <ref name="위키백과">〈[https://ko.wikipedia.org/wiki/%ED%95%98%EC%9D%B4%ED%8D%BC%EB%A7%81%ED%81%AC 하이퍼링크]〉, 《위키백과》</ref>
+
하이퍼링크(hyperlink)라는 용어는 1965년 쯤 [[테드 넬슨]](Ted Nelson = Nelson, Theodor H.)이 [[재너두 프로젝트]](Project Xanadu)를 시작하면서 고안되었다. 테드 넬슨은 배니버 부시의 유명한 논문인 As We May Think(우리가 생각하는 대로)에서 감명을 받았다. 이 논문에서 배니버 부시는 마이크로필름 기반의 머신 메멕스를 통해 사람은 어떠한 두 페이지의 정보를 관련 정보의 '꼬리(trail)'에 연결시켜 이 꼬리 속에 페이지 사이를 오고가며 마치 하나의 마이크로필름 두루마리에 있는 것처럼 할 수 있었다고 서술하였다. 우리에게 이와 가장 비슷한 것을 찾아본다면 한 토픽에 관련된 웹 페이지들의 즐겨찾기 목록을 만드는 작업을 예로 들 수 있다. <ref name="위키백과">〈[https://ko.wikipedia.org/wiki/%ED%95%98%EC%9D%B4%ED%8D%BC%EB%A7%81%ED%81%AC 위키백과, 하이퍼링크]〉, 《위키백과》</ref>
  
 
==역사==
 
==역사==
21번째 줄: 21번째 줄:
 
엥겔바트에 의해 하이퍼텍스트 환경이 구현된 1968년 이후 하이퍼텍스트의 연구 속도는 빨라졌다. 1972년에서 1975년에 연구된 [[ZOG]]를 거쳐 1978년에는 MIT 아키텍처 머신 그룹의 [[앤디 리프먼]](Andy Lippman)이 'Aspen Movie Map'이라는 하이퍼 미디어 시스템을 처음 개발해 텍스트 외의 다양한 매체 활용 가능성으로 확대시켰다. 1984년에는 매킨토시를 위한 하이퍼미디어 데이터베이스인 'Filevision'이 선보이게 된다. 1987년에는 첫 번째 하이퍼텍스트 컨퍼런스(Hypertext Conference)가 애플컴퓨터를 포함한 23개 회사와 벨통신연구소, 하버드 대학교, 제록스 PARC 등 29개 연구기관의 협조로 열렸다. 이때부터 하이퍼텍스트는 본격적으로 많은 기업과 기관이 참여하는 분야로 확산되기 시작했다.  
 
엥겔바트에 의해 하이퍼텍스트 환경이 구현된 1968년 이후 하이퍼텍스트의 연구 속도는 빨라졌다. 1972년에서 1975년에 연구된 [[ZOG]]를 거쳐 1978년에는 MIT 아키텍처 머신 그룹의 [[앤디 리프먼]](Andy Lippman)이 'Aspen Movie Map'이라는 하이퍼 미디어 시스템을 처음 개발해 텍스트 외의 다양한 매체 활용 가능성으로 확대시켰다. 1984년에는 매킨토시를 위한 하이퍼미디어 데이터베이스인 'Filevision'이 선보이게 된다. 1987년에는 첫 번째 하이퍼텍스트 컨퍼런스(Hypertext Conference)가 애플컴퓨터를 포함한 23개 회사와 벨통신연구소, 하버드 대학교, 제록스 PARC 등 29개 연구기관의 협조로 열렸다. 이때부터 하이퍼텍스트는 본격적으로 많은 기업과 기관이 참여하는 분야로 확산되기 시작했다.  
  
1987년에는 [[매킨토시]]에서 [[빌 앳킨슨]](Bill Atkinson)이 만든 [[하이퍼카드]](hypercard)라는 프로그램을 선보이면서 전문가들 사이에서 연구되던 하이퍼링크 개념이 일반인에게 보급되는 하이퍼링크 역사에서 빼놓을 수 없는 제품이 출시된 해이기도 하다. <ref name="IT문화원">〈[http://www.ith.kr/chair/semanticweb/sw0201_2.html 하이퍼링크의 역사(History of Hypertext)]〉, 《IT문화원》</ref>
+
1987년에는 [[매킨토시]]에서 [[빌 앳킨슨]](Bill Atkinson)이 만든 [[하이퍼카드]](hypercard)라는 프로그램을 선보이면서 전문가들 사이에서 연구되던 하이퍼링크 개념이 일반인에게 보급되는 하이퍼링크 역사에서 빼놓을 수 없는 제품이 출시된 해이기도 하다. <ref name="IT문화원">〈[http://www.ith.kr/chair/semanticweb/sw0201_2.html IT문화원, 하이퍼링크의 역사(History of Hypertext)]〉, 《IT문화원》</ref>
  
 
==특징==
 
==특징==
27번째 줄: 27번째 줄:
 
===종류===
 
===종류===
 
*'''단순 링크'''
 
*'''단순 링크'''
단순링크(simple link)란 링크를 원하는 웹 사이트의 메인페이지를 링크하는 것을 의미한다. 사용자는 특정 웹사이트를 단순링크하는 방법으로 자유롭게 사용할 수 있다.
+
단순링크(simple link)란 링크를 원하는 웹 사이트의 메인페이지를 링크하는 것을 의미한다. 사용자는 특정 웹사이트를 단순링크하는 방법으로 자유롭게 사용할 수 있다. <ref name="한겨례">〈[https://bridge.hani.co.kr/Hani/User?command=form&formtype=copyright 한겨례, 저작권 안내]〉, 《한겨례》</ref>
  
 
*'''직접 링크'''
 
*'''직접 링크'''
직접링크(deep link)란 특정 웹사이트의 메인페이지를 링크한것이 아니라 그 하위 페이지나 특정 웹페이지, 특히 개별사이트나 사진을 직접 링크한 경우를 말한다.
+
직접링크(deep link)란 특정 웹사이트의 메인페이지를 링크한것이 아니라 그 하위 페이지나 특정 웹페이지, 특히 개별사이트나 사진을 직접 링크한 경우를 말한다. <ref name="한겨례"></ref>
  
 
*'''임베디드 링크'''
 
*'''임베디드 링크'''
임베디드 링크(embedded link)란 링크된 정보를 호출하기 위해 사용자가 클릭할 필요없이 링크 제공 정보를 포함한 웹페이지에 접속하면 자동으로 링크된 정보가 바로 재생되는 방식의 링크를 말한다.  <ref name="VENTURESQUARE">〈[https://www.venturesquare.net/754519 "임베디드 링크는 저작권 침해 방조 행위"]〉, 《벤처몰》, 2017-10-10</ref>
+
임베디드 링크(embedded link)란 링크된 정보를 호출하기 위해 사용자가 클릭할 필요없이 링크 제공 정보를 포함한 웹페이지에 접속하면 자동으로 링크된 정보가 바로 재생되는 방식의 링크를 말한다.  <ref name="VENTURE SQUARE">〈[https://www.venturesquare.net/754519 "임베디드 링크는 저작권 침해 방조 행위"]〉, 《벤처몰》, 2017-10-10</ref>
  
 
*'''프레이밍 링크'''
 
*'''프레이밍 링크'''
프레이밍 링크(framing link)란 자신의 웹사이트 윤곽과 광고 속에서 타인의 웹사이트 정보가 나타나도록 타인의 웹사이트나 웹페이지를 링크하는 것이다. 프레임 링크(frame link)라도고 불린다.
+
프레이밍 링크(framing link)란 자신의 웹사이트 윤곽과 광고 속에서 타인의 웹사이트 정보가 나타나도록 타인의 웹사이트나 웹페이지를 링크하는 것이다. 프레임 링크(frame link)라도고 불린다. <ref name="한겨례"></ref>
  
 
===디자인의 장단점===
 
===디자인의 장단점===
 
*'''장점'''
 
*'''장점'''
하이퍼링크는 파란색 밑줄이 쳐진 친숙함은 디자인 요소로써 그 지속성을 설명하는데 도움이 된다. 지난 수년간 시각화에 대한 시각을 계속 발전시켜왔던 닐슨은 '일관성은 링크 생상의 의미를 유저에게 가르치는게 핵심이다'라고 말했다. 파란색은 역사적으로 일관성을 제공해왔고 파란색과 클릭 가능성의 심리적 유대를 강화시킬 수 있었다. 파란색 하이퍼링크는 가장 흔항 유형의 색맹을 가진 사람들이 겪는 접근성 문제를 피해갈 수 있다. 사용자가 색을 보는데 문제가 있더라도 관습적 하이퍼링크에 사용되는 밑줄이 색상을 대신하여 링크임으로 표현해준다. 즉, 파란색을 인지하지 못하는 색맹일 경우에도 링크를 알아차리는데에 문제 없다는 의미이다. 밑줄이는 또 다른 이점을 지니고 있는데, 함부르크 대학교에서 진행한 2003년도 연구에 따르면 밑줄 쳐진 링크는 텍스트 안에서 서서브 헤딩과 같은 기능을 하게되어, 사용자가 내용을 훑어볼 때 중요한 정보로 사용자에게 안내해주게된다. 밑줄은 다른 효과를 더해주지않더라도 링크를 찾기 쉽게 만들어 주기도하며 클릭률을 높여주기도 한다.
+
하이퍼링크는 파란색 밑줄이 쳐진 친숙함은 디자인 요소로써 그 지속성을 설명하는데 도움이 된다. 지난 수년간 시각화에 대한 시각을 계속 발전시켜왔던 닐슨은 '일관성은 링크 생상의 의미를 유저에게 가르치는게 핵심이다'라고 말했다. 파란색은 역사적으로 일관성을 제공해왔고 파란색과 클릭 가능성의 심리적 유대를 강화시킬 수 있었다. 파란색 하이퍼링크는 가장 흔항 유형의 색맹을 가진 사람들이 겪는 접근성 문제를 피해갈 수 있다. 사용자가 색을 보는데 문제가 있더라도 관습적 하이퍼링크에 사용되는 밑줄이 색상을 대신하여 링크임으로 표현해준다. 즉, 파란색을 인지하지 못하는 색맹일 경우에도 링크를 알아차리는데에 문제 없다는 의미이다. 밑줄이는 또 다른 이점을 지니고 있는데, 함부르크 대학교에서 진행한 2003년도 연구에 따르면 밑줄 쳐진 링크는 텍스트 안에서 서서브 헤딩과 같은 기능을 하게되어, 사용자가 내용을 훑어볼 때 중요한 정보로 사용자에게 안내해주게된다. 밑줄은 다른 효과를 더해주지않더라도 링크를 찾기 쉽게 만들어 주기도하며 클릭률을 높여주기도 한다. <ref name="brunch">〈[https://brunch.co.kr/@ebprux/152 brunch, 하이퍼링크 UX 가이드라인]〉, 《brunch》, 2016-10-19</ref>
 +
 
  
 
*'''단점'''
 
*'''단점'''
우선 하이퍼링크로 자주 사용되는 디자인인 파란색에 밑줄은 접근성 문제를 전부 해결해주진 못한다. KarynGraves의 연구에 따르면 나이가 많은 사용자들은 사실 파란색을 인지하는데 더 큰 문제를 겪는다고한다. 눈은 시간이 흐를수록 다른색보다 파란색을 인지하는데 덜 민감해지게 되어, 나이가 듦에 따라 파란색에 초점을 맞출 수 있는 능력이 떨어지기 때문이다. 어쩌면 온라인 사용자의 연령대가 높아질수록 기존에 사용하던 하이퍼링크의 디자인이 바뀔 수 있을지도 모르겠다. 다음은 밑줄에 해당한다. 밑줄의 방해속성은 대충 훑어보는 사람들에게 더 두드러지게 나타나지만, 보다 일반적인 수준에서 가독성을 방해하기도 한다. 밑줄이 텍스트를 보는 자연스러운 시선의 흐름을 방해할뿐만 아니라, 쉽게 읽을 수 있는 문자 사이에 끼어들기도 하고 판독하기 어렵게 만들기도 한다. 이러한 가독성에 미치는 부정적인 영향은 구글의 링크 디자인에 영향을 미치게 된다. 2014년, 구글은 가독성을 개선하고 전반적으로 말끔한 외관을 만들기 위해 광범위한 인터페이스의 미니멀리즘 유행과 플랫 디자인 유형을 적용시킴으로써, 링크 또한 밑줄을 제거하였다.
+
우선 하이퍼링크로 자주 사용되는 디자인인 파란색에 밑줄은 접근성 문제를 전부 해결해주진 못한다. KarynGraves의 연구에 따르면 나이가 많은 사용자들은 사실 파란색을 인지하는데 더 큰 문제를 겪는다고한다. 눈은 시간이 흐를수록 다른색보다 파란색을 인지하는데 덜 민감해지게 되어, 나이가 듦에 따라 파란색에 초점을 맞출 수 있는 능력이 떨어지기 때문이다. 어쩌면 온라인 사용자의 연령대가 높아질수록 기존에 사용하던 하이퍼링크의 디자인이 바뀔 수 있을지도 모르겠다. 다음은 밑줄에 해당한다. 밑줄의 방해속성은 대충 훑어보는 사람들에게 더 두드러지게 나타나지만, 보다 일반적인 수준에서 가독성을 방해하기도 한다. 밑줄이 텍스트를 보는 자연스러운 시선의 흐름을 방해할뿐만 아니라, 쉽게 읽을 수 있는 문자 사이에 끼어들기도 하고 판독하기 어렵게 만들기도 한다. 이러한 가독성에 미치는 부정적인 영향은 구글의 링크 디자인에 영향을 미치게 된다. 2014년, 구글은 가독성을 개선하고 전반적으로 말끔한 외관을 만들기 위해 광범위한 인터페이스의 미니멀리즘 유행과 플랫 디자인 유형을 적용시킴으로써, 링크 또한 밑줄을 제거하였다. <ref name="brunch"></ref>
  
파란색 밑줄 하이퍼링크의 또 다른 단점으론 디바이스 사용이다. 당시 파란색 밑줄 하이퍼링크가 생겨났을때, 아무도 주머니 항상 넣고 다닐수있는 강력한 미니 컴퓨터 즉, 스마트폰이 등장할 것이라고 상상하지 못했다. 터치스크린과 웨어러블은 우리가 디바이스와 상호작용하는 방식에 혁명을 일으켰고, 하이퍼링크는 모바일 디바이스에서 투박해보이기 시작했다. 클릭하기도 어려웠을뿐더러 보통 엄지손가락 영역 밖에 있기도 했으며, 여러 페이지를 넘나드는 것은 사용자에게 불편을 야기했다. AnthonyT는 링크는 어떻게 클릭해야하는지 사용자가 고민하게 만들면 안된다고 하였다. 만약 사용자가 애플리케이션 사용에 집중하지못하고 링크를 클릭하려면 손가락을 어떻게 움직이고 방향을 잡고 돌려야 하는지 등에 집중해야한다면, 이는 애플리케이션 사용 경험이 떨어지게 되기 때문이다.  
+
파란색 밑줄 하이퍼링크의 또 다른 단점으론 디바이스 사용이다. 당시 파란색 밑줄 하이퍼링크가 생겨났을때, 아무도 주머니 항상 넣고 다닐수있는 강력한 미니 컴퓨터 즉, 스마트폰이 등장할 것이라고 상상하지 못했다. 터치스크린과 웨어러블은 우리가 디바이스와 상호작용하는 방식에 혁명을 일으켰고, 하이퍼링크는 모바일 디바이스에서 투박해보이기 시작했다. 클릭하기도 어려웠을뿐더러 보통 엄지손가락 영역 밖에 있기도 했으며, 여러 페이지를 넘나드는 것은 사용자에게 불편을 야기했다. AnthonyT는 링크는 어떻게 클릭해야하는지 사용자가 고민하게 만들면 안된다고 하였다. 만약 사용자가 애플리케이션 사용에 집중하지못하고 링크를 클릭하려면 손가락을 어떻게 움직이고 방향을 잡고 돌려야 하는지 등에 집중해야한다면, 이는 애플리케이션 사용 경험이 떨어지게 되기 때문이다. <ref name="brunch"></ref>
  
 
==링크 방식==
 
==링크 방식==
72번째 줄: 73번째 줄:
  
 
*'''이미지'''
 
*'''이미지'''
이미지로 링크는 이미지에 마우스를 클릭하면 이미지에 걸려있는 링크로 이동시키는 방식이다. 단, 이미지로 링크시킬 경우 위의 img 태그에 해당하는 border속성은 테두리를 0으로 지정해주는 속성으로 반드시 필요하다.
+
이미지로 링크는 이미지에 마우스를 클릭하면 이미지에 걸려있는 링크로 이동시키는 방식이다. 단, 이미지로 링크시킬 경우 위의 img 태그에 해당하는 border속성은 테두리를 0으로 지정해주는 속성으로 반드시 필요하다. <ref name="에브리씽씽"></ref>
 
   예제)
 
   예제)
 
  <a href="http://wiki.hash.kr/index.php/%EB%8C%80%EB%AC%B8"><img src="이미지url" border="0"/></a>
 
  <a href="http://wiki.hash.kr/index.php/%EB%8C%80%EB%AC%B8"><img src="이미지url" border="0"/></a>
  
 
*'''이메일'''
 
*'''이메일'''
이메일로 링크는 링크가 걸린 텍스트를 클릭하면 자동으로 전자우편 메시지를 작성할 수 있도록 메시지 작성창이 뜨며, 수취란(받는 사람)에 이메일 주소가 자동으로 입력되도록 하는 방식이다. 이메일 링크 방식 사용시에 href 속성에 시작을 반드시 'mailto:' 로 시작해야한다.
+
이메일로 링크는 링크가 걸린 텍스트를 클릭하면 자동으로 전자우편 메시지를 작성할 수 있도록 메시지 작성창이 뜨며, 수취란(받는 사람)에 이메일 주소가 자동으로 입력되도록 하는 방식이다. 이메일 링크 방식 사용시에 href 속성에 시작을 반드시 'mailto:' 로 시작해야한다. <ref name="에브리씽씽"></ref>
 
   예제)
 
   예제)
 
  <a href="mailto:test1234@naver.com">test1234에게 메일 보내기</a>
 
  <a href="mailto:test1234@naver.com">test1234에게 메일 보내기</a>
88번째 줄: 89번째 줄:
  
 
*'''기타 파일(동영상, 음악, 자료, 압축, 프로그램)'''
 
*'''기타 파일(동영상, 음악, 자료, 압축, 프로그램)'''
기타 파일로 링크는 음악이나 동영상을 클릭해서 띄우거나, 압출파일, 프로그램 등을 클릭해서 다운받을 수 있게 링크하는 방식이다.
+
기타 파일로 링크는 음악이나 동영상을 클릭해서 띄우거나, 압출파일, 프로그램 등을 클릭해서 다운받을 수 있게 링크하는 방식이다. <ref name="에브리씽씽"></ref>
 
  예제)
 
  예제)
 
  <a href="**.exe">파일 다운로드 받기</a>  
 
  <a href="**.exe">파일 다운로드 받기</a>  
97번째 줄: 98번째 줄:
 
'''1. 유의미한 텍스트를 하이퍼링크에 연결한다.'''
 
'''1. 유의미한 텍스트를 하이퍼링크에 연결한다.'''
  
예를들면, '클릭(click here)' 텍스트와 같이 정확히 무엇을 클릭하게 되는지 어떠한 의미도 알 수 없는 텍스트에 링크를 연결하는 것은 사용자에게 추가 정보를 찾도록 암암리에 강요받는 느낌을 줄 수 있다. 사용자는 스파이웨어를 조심해야하기 때문에 링크를 클릭하면 어디로 가는 것인지 텍스트로 알려줘야한다.
+
예를들면, '클릭(click here)' 텍스트와 같이 정확히 무엇을 클릭하게 되는지 어떠한 의미도 알 수 없는 텍스트에 링크를 연결하는 것은 사용자에게 추가 정보를 찾도록 암암리에 강요받는 느낌을 줄 수 있다. 사용자는 스파이웨어를 조심해야하기 때문에 링크를 클릭하면 어디로 가는 것인지 텍스트로 알려줘야한다. <ref name="brunch"></ref>
  
 
'''2. 파란색 텍스트는 제거한다.'''
 
'''2. 파란색 텍스트는 제거한다.'''
  
사용자는 파란색 텍스트는 링크가 연결되있을거라는 기억 때문에, 파란색 텍스트를 보면 클릭 가능성을 떠올리게된다. 파란색 텍스트가 클릭되지않거나 링크가 연결되있지않으면 사용자들은 이에 대한 불만이 생길 수 있다. 그렇기 때문에 사용자에게 혼동을 주지않기 위해서 링크가 연결되있지않은 텍스트는 되도록 파란색 텍스트를 사용하지않는것이 좋다.  
+
사용자는 파란색 텍스트는 링크가 연결되있을거라는 기억 때문에, 파란색 텍스트를 보면 클릭 가능성을 떠올리게된다. 파란색 텍스트가 클릭되지않거나 링크가 연결되있지않으면 사용자들은 이에 대한 불만이 생길 수 있다. 그렇기 때문에 사용자에게 혼동을 주지않기 위해서 링크가 연결되있지않은 텍스트는 되도록 파란색 텍스트를 사용하지않는것이 좋다. <ref name="brunch"></ref>
  
 
'''3. 링크를 분명히 보이게 만든다.'''
 
'''3. 링크를 분명히 보이게 만든다.'''
  
사용자가 링크를 찾기 위해 반드시 인터페이스와 상호작용해야되게 링크를 생성해서는 안된다. 해당 페이지에서 링크가 사용자의 눈에 잘 띄일 수 있도록 만들어야한다.
+
사용자가 링크를 찾기 위해 반드시 인터페이스와 상호작용해야되게 링크를 생성해서는 안된다. 해당 페이지에서 링크가 사용자의 눈에 잘 띄일 수 있도록 만들어야한다. <ref name="brunch"></ref>
  
 
'''4. 한 가지 하이퍼링크 디자인을 고르고, 해당 디자인을 고수해야한다.'''
 
'''4. 한 가지 하이퍼링크 디자인을 고르고, 해당 디자인을 고수해야한다.'''
  
사용자의 혼동을 사전에 방지하기 위해 한 사이트 안에서는 링크를 시각화하는 방법이 다양해서는 안된다. 링크가 걸린 텍스트의 디자인을 하나로 고정하고, 해당 디자인은 링크가 연결되는 텍스트마다 적용하는것이 좋다.
+
사용자의 혼동을 사전에 방지하기 위해 한 사이트 안에서는 링크를 시각화하는 방법이 다양해서는 안된다. 링크가 걸린 텍스트의 디자인을 하나로 고정하고, 해당 디자인은 링크가 연결되는 텍스트마다 적용하는것이 좋다. <ref name="brunch"></ref>
  
 
'''5. 방문한 링크는 표시해야한다.'''
 
'''5. 방문한 링크는 표시해야한다.'''
  
클릭했던 링크는 파란색이 아닌 물 빠진 색감으로 톤을 바꾸거나 구글에서 클릭한 링크를 파란색에서 보라색 계열로 바꾸는 것처럼 파란색이 아닌 다른 색상의 계열로 바뀌게 함으로써 사용자에게 클릭했던 링크임을 알려줘야한다.
+
클릭했던 링크는 파란색이 아닌 물 빠진 색감으로 톤을 바꾸거나 구글에서 클릭한 링크를 파란색에서 보라색 계열로 바꾸는 것처럼 파란색이 아닌 다른 색상의 계열로 바뀌게 함으로써 사용자에게 클릭했던 링크임을 알려줘야한다. <ref name="brunch"></ref>
  
 
'''6. 마우스 오버 모양이 생성되어야한다.'''
 
'''6. 마우스 오버 모양이 생성되어야한다.'''
  
사용자가 링크가 연결된 텍스트에 마우스를 올려놓으면 마우스 모양이 바뀌어야한다. 이는 사용자에게 해당 텍스트는 링크가 연결되어 클릭이 가능하다는 것을 강조하여 알려주는 효과를 줄 수 있다.
+
사용자가 링크가 연결된 텍스트에 마우스를 올려놓으면 마우스 모양이 바뀌어야한다. 이는 사용자에게 해당 텍스트는 링크가 연결되어 클릭이 가능하다는 것을 강조하여 알려주는 효과를 줄 수 있다. <ref name="brunch"></ref>
  
 
'''7. 텍스트의 크기가 여유 있어야 한다.'''
 
'''7. 텍스트의 크기가 여유 있어야 한다.'''
  
링크가 연결된 텍스트의 크기를 여유있게 만들어서 모바일이나 터치 스크린 같은 손가락을 사용해야 하는 기기를 고려하여, 링크 주변에만 가더라도 쉽게 클릭할 수 있도록 해야한다.
+
링크가 연결된 텍스트의 크기를 여유있게 만들어서 모바일이나 터치 스크린 같은 손가락을 사용해야 하는 기기를 고려하여, 링크 주변에만 가더라도 쉽게 클릭할 수 있도록 해야한다. <ref name="brunch"></ref>
  
 
{{각주}}
 
{{각주}}

2020년 9월 4일 (금) 14:17 판

하이퍼링크(hyperlink)란 하나의 개체를 다른 개체로 연결하는 것을 말한다. 간략히 링크(link)라고 한다. 하이퍼링크가 포함된 텍스트 문서를 하이퍼텍스트(hypertext)라고 한다. 하이퍼링크를 따라 하이퍼텍스트를 읽도록 해 주는 응용 프로그램을 브라우저(browser)라고 한다.

개요

하이퍼텍스트 문서 내의 하나의 단어나 구(phrase), 기호, 화상과 같은 요소와 그 문저 내의 다른 요소 또는 다른 하이퍼텍스트 문서 내의 다른 요소 사이의 연결을 의미하며 하이퍼텍스트 링크, 핫 링크라도고 한다. 하이퍼링크가 되어있는 것엔 밑줄이 있거나 다른 색상으로 구분되어 표시된다. 사용자가 링크된 요소를 클릭하면 하이퍼링크로 활성화된다. 하이퍼링크를 이용하면 같은 하이퍼 텍스트 문서 내의 한 요소와 다른 요소의 연결을 선택하여 검색할 수 있고, 다른 인터넷 호스트에 있는 월드 와이드 웹(WWW) 서버 상의 하이퍼텍스트 문서 내 다른 요소와의 연결을 선택하여 검색할 수도 있다. [1] 하이퍼링크를 사용할 경우 유의해야할 사항이 있다. 일반적으로 링크를 하는것은 저작권법에 위반되지않는다. 하지만 뉴스 기사를 긁어와서 개인 사이트(블로그나 카페 등등)에 올리는 행위는 저작권법 위반이므로 반드시 링크 스크랩을 해줘야한다. 왜냐하면 인터넷 신문 회사의 수익 구조는 조회수가 바로 광고 수입으로 직결되어 이를 통해 수익을 창출하는 구조로 이루어져 있기 때문에 조회수가 줄어들면 신문 회사의 수입이 줄어들게됨으로 경제적인 타격이 될 수 밖에 없다. 그렇기에 2005~2006년 경, 신문 회사들이 연합하여 뉴스 기사를 긁어 와서 타 사이트에 올리는 행위를 저작권법 위반으로 처벌해달라고 정부에 요청하였고, 이후 저작권법 개정안이 통과되어 이와 같은 행위가 불법으로 규정된것이다. [2]

등장배경

테드 넬슨(Ted Nelson)

하이퍼링크(hyperlink)라는 용어는 1965년 쯤 테드 넬슨(Ted Nelson = Nelson, Theodor H.)이 재너두 프로젝트(Project Xanadu)를 시작하면서 고안되었다. 테드 넬슨은 배니버 부시의 유명한 논문인 As We May Think(우리가 생각하는 대로)에서 감명을 받았다. 이 논문에서 배니버 부시는 마이크로필름 기반의 머신 메멕스를 통해 사람은 어떠한 두 페이지의 정보를 관련 정보의 '꼬리(trail)'에 연결시켜 이 꼬리 속에 페이지 사이를 오고가며 마치 하나의 마이크로필름 두루마리에 있는 것처럼 할 수 있었다고 서술하였다. 우리에게 이와 가장 비슷한 것을 찾아본다면 한 토픽에 관련된 웹 페이지들의 즐겨찾기 목록을 만드는 작업을 예로 들 수 있다. [3]

역사

빌 앳킨슨(Bill Atkinson)
하이퍼카드와 하이퍼카드도구

하이퍼텍스트(hyper-text) 기술은 정보검색과 활용에서 혁명을 가져온 기술이다. 그러나 이 기술을 우리가 일상 속에서 쓰기까지 수 많은 학자들의 노력이 있었다. 이러한 노력을 바탕으로 팀 버너스-리(Tim Berners-Lee)의 웹(web)이 탄생할 수 있었던 것이다. 그러나 웹이 우리의 일상생활을 바꾸며 거대한 문화적 혁명을 일으켰지만 아직도 웹의 창시자인 팀 버너스-리가 생각한 '진정한 웹'은 구현되지 않은 상태다. 좀 더 편하고 완벽한 정보 연결과 지식의 학습을 위해 웹은 계속 변화하고 있으며, 이를 위해 많은 사람들이 노력하고 있다. 팀 버너스 리가 생각하는 '정보의 연결을 통한 지식의 공유와 학습'은 그 이전부터 많은 학자들이 꿈꾸던 일이었으며 많은 사람들이 이를 구현하기 위해 노력을 기울였다. 어쩌면 거의 반세기 동안 하이퍼링크 구현을 위해 많은 사람들이 노력했던거와 같은 셈이다.

1965년에는 테드 넬슨이 메멕스에서 제시된 개념을 실제로 정리해 하이퍼텍스트라는 이름으로 발표했다. 사실 'hypertext'는 넬슨이 1963년부터 만들어 사용하고 있었다. 다만 정식으로 지면에 나온 것이 1965년이기에 1965년을 'hypertext'의 출현 해로 기록하는 것이다. 그가 인터뷰한 내용을 보면 하이퍼텍스트는 연속적으로 적어야 하는 종이와 달리 좀 더 유연한 비선형(비연속적) 방식의 표시방식임을 알 수 있다. 그는 여러 종류 문서를 저장하고 이들 문서의 차이점을 보여주는 제나두 프로젝트를 기획한다. 이를 위해 비선형 쓰기를 쉽게 해주고, 사용자가 전자문서의 경로를 통해 선택할 수 있는 글틀을 생각한다. 그가 정희한 바에 따르면 비연속적 쓰기와 사용자가 선택한 것을 대화식 화면으로 읽을 수 있는 방식을 말하는데, 현재 우리가 사용하는 하이퍼텍스트의 개념과 일치한다.

2년 뒤인 1967년에 브라운 대학교앤디 반담(Andy van Dam)은 테드 넬슨의 하이퍼텍스트를 구현한 시스템을 창안하고 넬슨에게 이 사실을 알렸다. 그는 하이퍼텍스트 에디팅 시스템(HES)을 만들어 전자문서 작성의 길을 열었는데, 최초의 하이퍼텍스트 시스템으로 인정받고 있다. 1968년에는 이런 과정이 본격적으로 가시화되기 시작한다. GUI 방식의 선구자로 불리는 더글라스 엥겔바트(Douglas Carl Engelbart)는 마우스를 발명함으로써 계산기 분야에 머물렀던 컴퓨터 사용 분야를 일상생활 분야로 확장했다. 엥겔바트는 1968년 12월 9일, 멘로파크 스탠포드 연구소의 'Augmentation Research Center'에서 90분 간의 공개 시범을 보였다. 여기에서 그가 1962년부터 연구한 'agument' 관련 결과물과 NLS(oNLine System) 등이 포함된다. 이 자리는 마우스가 처음 선보인 자리로 유명한데, 마우스는 이날 선보인 혁신적인 기술 중 일부에 불과하다. 하이퍼텍스트를 포함해 객체주소, 동적 파일 링킹 등의 개념이 이때 선보이며 큰 충격을 주었다.

엥겔바트에 의해 하이퍼텍스트 환경이 구현된 1968년 이후 하이퍼텍스트의 연구 속도는 빨라졌다. 1972년에서 1975년에 연구된 ZOG를 거쳐 1978년에는 MIT 아키텍처 머신 그룹의 앤디 리프먼(Andy Lippman)이 'Aspen Movie Map'이라는 하이퍼 미디어 시스템을 처음 개발해 텍스트 외의 다양한 매체 활용 가능성으로 확대시켰다. 1984년에는 매킨토시를 위한 하이퍼미디어 데이터베이스인 'Filevision'이 선보이게 된다. 1987년에는 첫 번째 하이퍼텍스트 컨퍼런스(Hypertext Conference)가 애플컴퓨터를 포함한 23개 회사와 벨통신연구소, 하버드 대학교, 제록스 PARC 등 29개 연구기관의 협조로 열렸다. 이때부터 하이퍼텍스트는 본격적으로 많은 기업과 기관이 참여하는 분야로 확산되기 시작했다.

1987년에는 매킨토시에서 빌 앳킨슨(Bill Atkinson)이 만든 하이퍼카드(hypercard)라는 프로그램을 선보이면서 전문가들 사이에서 연구되던 하이퍼링크 개념이 일반인에게 보급되는 하이퍼링크 역사에서 빼놓을 수 없는 제품이 출시된 해이기도 하다. [4]

특징

종류

  • 단순 링크

단순링크(simple link)란 링크를 원하는 웹 사이트의 메인페이지를 링크하는 것을 의미한다. 사용자는 특정 웹사이트를 단순링크하는 방법으로 자유롭게 사용할 수 있다. [5]

  • 직접 링크

직접링크(deep link)란 특정 웹사이트의 메인페이지를 링크한것이 아니라 그 하위 페이지나 특정 웹페이지, 특히 개별사이트나 사진을 직접 링크한 경우를 말한다. [5]

  • 임베디드 링크

임베디드 링크(embedded link)란 링크된 정보를 호출하기 위해 사용자가 클릭할 필요없이 링크 제공 정보를 포함한 웹페이지에 접속하면 자동으로 링크된 정보가 바로 재생되는 방식의 링크를 말한다. [6]

  • 프레이밍 링크

프레이밍 링크(framing link)란 자신의 웹사이트 윤곽과 광고 속에서 타인의 웹사이트 정보가 나타나도록 타인의 웹사이트나 웹페이지를 링크하는 것이다. 프레임 링크(frame link)라도고 불린다. [5]

디자인의 장단점

  • 장점

하이퍼링크는 파란색 밑줄이 쳐진 친숙함은 디자인 요소로써 그 지속성을 설명하는데 도움이 된다. 지난 수년간 시각화에 대한 시각을 계속 발전시켜왔던 닐슨은 '일관성은 링크 생상의 의미를 유저에게 가르치는게 핵심이다'라고 말했다. 파란색은 역사적으로 일관성을 제공해왔고 파란색과 클릭 가능성의 심리적 유대를 강화시킬 수 있었다. 파란색 하이퍼링크는 가장 흔항 유형의 색맹을 가진 사람들이 겪는 접근성 문제를 피해갈 수 있다. 사용자가 색을 보는데 문제가 있더라도 관습적 하이퍼링크에 사용되는 밑줄이 색상을 대신하여 링크임으로 표현해준다. 즉, 파란색을 인지하지 못하는 색맹일 경우에도 링크를 알아차리는데에 문제 없다는 의미이다. 밑줄이는 또 다른 이점을 지니고 있는데, 함부르크 대학교에서 진행한 2003년도 연구에 따르면 밑줄 쳐진 링크는 텍스트 안에서 서서브 헤딩과 같은 기능을 하게되어, 사용자가 내용을 훑어볼 때 중요한 정보로 사용자에게 안내해주게된다. 밑줄은 다른 효과를 더해주지않더라도 링크를 찾기 쉽게 만들어 주기도하며 클릭률을 높여주기도 한다. [7]


  • 단점

우선 하이퍼링크로 자주 사용되는 디자인인 파란색에 밑줄은 접근성 문제를 전부 해결해주진 못한다. KarynGraves의 연구에 따르면 나이가 많은 사용자들은 사실 파란색을 인지하는데 더 큰 문제를 겪는다고한다. 눈은 시간이 흐를수록 다른색보다 파란색을 인지하는데 덜 민감해지게 되어, 나이가 듦에 따라 파란색에 초점을 맞출 수 있는 능력이 떨어지기 때문이다. 어쩌면 온라인 사용자의 연령대가 높아질수록 기존에 사용하던 하이퍼링크의 디자인이 바뀔 수 있을지도 모르겠다. 다음은 밑줄에 해당한다. 밑줄의 방해속성은 대충 훑어보는 사람들에게 더 두드러지게 나타나지만, 보다 일반적인 수준에서 가독성을 방해하기도 한다. 밑줄이 텍스트를 보는 자연스러운 시선의 흐름을 방해할뿐만 아니라, 쉽게 읽을 수 있는 문자 사이에 끼어들기도 하고 판독하기 어렵게 만들기도 한다. 이러한 가독성에 미치는 부정적인 영향은 구글의 링크 디자인에 영향을 미치게 된다. 2014년, 구글은 가독성을 개선하고 전반적으로 말끔한 외관을 만들기 위해 광범위한 인터페이스의 미니멀리즘 유행과 플랫 디자인 유형을 적용시킴으로써, 링크 또한 밑줄을 제거하였다. [7]

파란색 밑줄 하이퍼링크의 또 다른 단점으론 디바이스 사용이다. 당시 파란색 밑줄 하이퍼링크가 생겨났을때, 아무도 주머니 항상 넣고 다닐수있는 강력한 미니 컴퓨터 즉, 스마트폰이 등장할 것이라고 상상하지 못했다. 터치스크린과 웨어러블은 우리가 디바이스와 상호작용하는 방식에 혁명을 일으켰고, 하이퍼링크는 모바일 디바이스에서 투박해보이기 시작했다. 클릭하기도 어려웠을뿐더러 보통 엄지손가락 영역 밖에 있기도 했으며, 여러 페이지를 넘나드는 것은 사용자에게 불편을 야기했다. AnthonyT는 링크는 어떻게 클릭해야하는지 사용자가 고민하게 만들면 안된다고 하였다. 만약 사용자가 애플리케이션 사용에 집중하지못하고 링크를 클릭하려면 손가락을 어떻게 움직이고 방향을 잡고 돌려야 하는지 등에 집중해야한다면, 이는 애플리케이션 사용 경험이 떨어지게 되기 때문이다. [7]

링크 방식

링크를 연결시키기 위해선 〈a〉태그를 사용하고, 태그 안에서 선언하는 속성들을 이용하여 하이퍼링크를 생성할 수 있다.

  • 문자

문자로 링크를 연결하는 방식은 링크태그의 기본이다. 말 그대로 문자를 클릭해서 링크를 타고 들어갈 수 있도록 연결하는 방식이다. href 속성은 url을 지정해주고, target속성은 링크된 페이지를 어떻게 열어줄 것인지를 지정해준다.[8]

예제)
<a href="http://wiki.hash.kr/index.php/%EB%8C%80%EB%AC%B8" target="blank">해시넷_코인위키</a>
종류 기능
target=_top 링크시킨 html 문서를 프레임 구조의 형태를 완전히 벗어나서 오픈된 브라우저 화면을 열도록 한다.
target=_blank 링크시킨 html 문서를 기존 프레임의 브라우저는 그대로 놔두고, 새로운 브라우저에서 열도록 한다.
target=parent 기본의 프레임 구조를 완전히 벗어나서, 현재의 프레임 구조로 들어오기 이전의 한 단계 상위 페이지로 올라가도록 링크한다.
target_self 하이퍼링크 시킨 문서를 같은 프레임에서 열도록 한다. 기본으로 설정되어있는 속성이다.
  • 이미지

이미지로 링크는 이미지에 마우스를 클릭하면 이미지에 걸려있는 링크로 이동시키는 방식이다. 단, 이미지로 링크시킬 경우 위의 img 태그에 해당하는 border속성은 테두리를 0으로 지정해주는 속성으로 반드시 필요하다. [8]

 예제)
<a href="http://wiki.hash.kr/index.php/%EB%8C%80%EB%AC%B8"><img src="이미지url" border="0"/></a>
  • 이메일

이메일로 링크는 링크가 걸린 텍스트를 클릭하면 자동으로 전자우편 메시지를 작성할 수 있도록 메시지 작성창이 뜨며, 수취란(받는 사람)에 이메일 주소가 자동으로 입력되도록 하는 방식이다. 이메일 링크 방식 사용시에 href 속성에 시작을 반드시 'mailto:' 로 시작해야한다. [8]

 예제)
<a href="mailto:test1234@naver.com">test1234에게 메일 보내기</a>
  • 웹 페이지 내부(책갈피 기능)

웹 페이지 내부로 링크는 책갈피 기능을 의미하는데, 책갈피 기능이란 하나의 html 문서가 내용이 너무 길어서 한 화면 안에 모두 표시하지 못할 경우 문서의 특정 위치에 이름을 붙여두고, 그 곳으로 하이퍼링크를 시켜서 이동할 수 있도록 하는 기능이다. 또한 이 기능은 특정 내용이 있는 곳으로 빨리 이동할 수 있다. [9]

예제)
<a name="test">텍스트 또는 이미지</a> 
<a href="#test">길이가 긴 텍스트나 여러개의 이미지</a>
  • 기타 파일(동영상, 음악, 자료, 압축, 프로그램)

기타 파일로 링크는 음악이나 동영상을 클릭해서 띄우거나, 압출파일, 프로그램 등을 클릭해서 다운받을 수 있게 링크하는 방식이다. [8]

예제)
<a href="**.exe">파일 다운로드 받기</a> 
<a href="**.wav">미디어 열기</a>
<a href="**.asw">동영상 열기</a>

가이드라인

1. 유의미한 텍스트를 하이퍼링크에 연결한다.

예를들면, '클릭(click here)' 텍스트와 같이 정확히 무엇을 클릭하게 되는지 어떠한 의미도 알 수 없는 텍스트에 링크를 연결하는 것은 사용자에게 추가 정보를 찾도록 암암리에 강요받는 느낌을 줄 수 있다. 사용자는 스파이웨어를 조심해야하기 때문에 링크를 클릭하면 어디로 가는 것인지 텍스트로 알려줘야한다. [7]

2. 파란색 텍스트는 제거한다.

사용자는 파란색 텍스트는 링크가 연결되있을거라는 기억 때문에, 파란색 텍스트를 보면 클릭 가능성을 떠올리게된다. 파란색 텍스트가 클릭되지않거나 링크가 연결되있지않으면 사용자들은 이에 대한 불만이 생길 수 있다. 그렇기 때문에 사용자에게 혼동을 주지않기 위해서 링크가 연결되있지않은 텍스트는 되도록 파란색 텍스트를 사용하지않는것이 좋다. [7]

3. 링크를 분명히 보이게 만든다.

사용자가 링크를 찾기 위해 반드시 인터페이스와 상호작용해야되게 링크를 생성해서는 안된다. 해당 페이지에서 링크가 사용자의 눈에 잘 띄일 수 있도록 만들어야한다. [7]

4. 한 가지 하이퍼링크 디자인을 고르고, 해당 디자인을 고수해야한다.

사용자의 혼동을 사전에 방지하기 위해 한 사이트 안에서는 링크를 시각화하는 방법이 다양해서는 안된다. 링크가 걸린 텍스트의 디자인을 하나로 고정하고, 해당 디자인은 링크가 연결되는 텍스트마다 적용하는것이 좋다. [7]

5. 방문한 링크는 표시해야한다.

클릭했던 링크는 파란색이 아닌 물 빠진 색감으로 톤을 바꾸거나 구글에서 클릭한 링크를 파란색에서 보라색 계열로 바꾸는 것처럼 파란색이 아닌 다른 색상의 계열로 바뀌게 함으로써 사용자에게 클릭했던 링크임을 알려줘야한다. [7]

6. 마우스 오버 모양이 생성되어야한다.

사용자가 링크가 연결된 텍스트에 마우스를 올려놓으면 마우스 모양이 바뀌어야한다. 이는 사용자에게 해당 텍스트는 링크가 연결되어 클릭이 가능하다는 것을 강조하여 알려주는 효과를 줄 수 있다. [7]

7. 텍스트의 크기가 여유 있어야 한다.

링크가 연결된 텍스트의 크기를 여유있게 만들어서 모바일이나 터치 스크린 같은 손가락을 사용해야 하는 기기를 고려하여, 링크 주변에만 가더라도 쉽게 클릭할 수 있도록 해야한다. [7]

각주

  1. 사이언스올, 하이퍼링크(hypertext)〉, 《홈페이지》
  2. 리그베다위키, 하이퍼링크〉, 《백과》, 2015-03-28
  3. 위키백과, 하이퍼링크〉, 《위키백과》
  4. IT문화원, 하이퍼링크의 역사(History of Hypertext)〉, 《IT문화원》
  5. 5.0 5.1 5.2 한겨례, 저작권 안내〉, 《한겨례》
  6. "임베디드 링크는 저작권 침해 방조 행위"〉, 《벤처몰》, 2017-10-10
  7. 7.0 7.1 7.2 7.3 7.4 7.5 7.6 7.7 7.8 7.9 brunch, 하이퍼링크 UX 가이드라인〉, 《brunch》, 2016-10-19
  8. 8.0 8.1 8.2 8.3 [하이퍼링크<a>태그/target종류]〉, 《티스토리》, 2014-11-28
  9. 하이퍼링크(Link) 태그〉, 《티스토리》, 2013-02-02

참고자료

같이 보기


  검수요청.png검수요청.png 이 하이퍼링크 문서는 프로그래밍에 관한 글로서 검토가 필요합니다. 위키 문서는 누구든지 자유롭게 편집할 수 있습니다. [편집]을 눌러 문서 내용을 검토·수정해 주세요.