해시넷
하이퍼링크
하이퍼링크(hyperlink)는 하나의 개체를 다른 개체로 연결하는 것이다. 하이퍼링크가 포함된 텍스트 문서를 하이퍼텍스트(hypertext)라고 하며, 하이퍼링크를 따라 하이퍼텍스트를 읽도록 해 주는 응용 프로그램을 브라우저(browser)라고 한다. 간략히 링크(link)라고도 불린다.
개요[편집]
하이퍼링크는 하이퍼텍스트 문서 내의 하나의 단어나 구(phrase), 기호, 화상과 같은 요소와 그 문제 내의 다른 요소 및 다른 하이퍼텍스트 문서 내의 다른 요소 사이의 연결을 의미하며, 하이퍼텍스트 링크 및 핫 링크라도고 한다. 하이퍼링크가 되어있는 것엔 밑줄이 있거나 다른 색상으로 구분되어 표시된다. 사용자가 링크된 요소를 클릭하면 하이퍼링크로 활성화된다. 하이퍼링크를 이용하면 같은 하이퍼 텍스트 문서 내의 한 요소와 다른 요소의 연결을 선택하여 검색할 수 있고, 다른 인터넷 호스트에 있는 월드 와이드 웹(WWW) 서버 상의 하이퍼텍스트 문서 내 다른 요소와의 연결을 선택하여 검색할 수도 있다. [1] 하이퍼링크를 사용할 경우에는 유의해야할 사항이 있다. 일반적으로 링크를 하는것은 저작권법에 위반되지 않지만, 뉴스 기사를 긁어와서 개인 사이트인 블로그나 카페 등에 올리는 행위는 저작권법 위반되어 반드시 링크 스크랩을 해줘야한다. 인터넷 신문 회사의 수익 구조는 조회수가 바로 광고 수입으로 직결되어 이를 통해 수익을 창출하는 구조로 이루어져 있기 때문에 조회수가 줄어들면 신문 회사의 수입이 줄어들게되며, 경제적인 타격이 될 수 밖에 없다. 이에 2005년, 신문 회사들이 연합하여 뉴스 기사를 긁어 와서 타 사이트에 올리는 행위를 저작권법 위반으로 처벌해달라고 정부에 요청하였다. 이후, 저작권법 개정안이 통과되어 이와 같은 행위가 불법으로 규정된것이다.[2]
등장 배경[편집]
1965년, 하이퍼링크라는 용어는 테드 넬슨(Ted Nelson)이 제너두 프로젝트(Project Xanadu)를 시작하면서 고안되었다. 테드 넬슨은 배니버 부시의 유명한 논문인 "우리가 생각하는 대로(As We May Think)"에서 감명을 받았다. 이 논문에서 배니버 부시는 마이크로필름 기반의 머신 메멕스를 통해 사람은 어떠한 두 페이지의 정보를 관련 정보의 꼬리(trail)에 연결시켜 이 꼬리 속에 페이지 사이를 오고가며 마치 하나의 마이크로필름 두루마리에 있는 것처럼 할 수 있다고 서술했다. 예를 들어, 이와 가장 비슷한 것은 한 토픽에 관련된 웹 페이지들의 즐겨찾기 목록을 만드는 작업이다.[3]
역사[편집]
하이퍼링크의 하이퍼텍스트(hyper-text) 기술은 정보검색과 활용에서 혁명을 가져온 기술이다. 이 기술을 일상 속에서 쓰기까지 수 많은 학자들의 노력이 있었다. 이러한 노력을 바탕으로 팀 버너스-리(Tim Berners-Lee)의 웹(web)이 탄생할 수 있었다. 그러나, 웹이 일상생활을 바꾸며 거대한 문화적 혁명을 일으켰지만 아직도 웹의 창시자인 팀 버너스-리가 생각한 '진정한 웹'은 구현되지 않은 상태이다. 더욱 편하고 완벽한 정보 연결과 지식의 학습을 위해 웹은 계속 변화하고 있으며, 이를 위해 많은 사람들이 노력하고 있다. 팀 버너스 리가 생각하는 '정보의 연결을 통한 지식의 공유와 학습'은 그 이전부터 많은 학자들이 꿈꾸던 일이었으며, 많은 사람들이 이를 구현하기 위해 노력을 기울였다. 또한, 반세기 동안 하이퍼링크 구현을 위해 많은 사람들이 노력했다.
1965년에는 테드 넬슨이 메멕스에서 제시된 개념을 실제로 정리해 하이퍼텍스트라는 이름으로 발표했다. 하이퍼텍스트는 테드 넬슨이 1963년부터 만들어 사용하고 있었다. 다만 정식으로 지면에 나온 것이 1965년이기에 1965년이 하이퍼텍스트의 출시 날이다. 그가 인터뷰한 내용을 보면 하이퍼텍스트는 연속적으로 적어야 하는 종이와 달리 좀 더 유연한 비선형 방식의 표시방식이다. 그는 여러 종류 문서를 저장하고, 이들 문서의 차이점을 보여주는 제나두 프로젝트를 기획했다. 이를 위해 비선형 쓰기를 쉽게 해주어 사용자가 전자문서의 경로를 통해 선택할 수 있는 글틀을 생각해냈다. 즉, 비연속적 쓰기와 사용자가 선택한 것을 대화식 화면으로 읽을 수 있는 방식을 말하며, 사용하는 하이퍼텍스트의 개념과 일치한다.
1967년, 테드 넬슨은 브라운 대학교(Brown University)의 앤디 반담(Andy van Dam)은 테드 넬슨의 하이퍼텍스트를 구현한 시스템을 창안하고, 이 사실을 알렸다. 그는 하이퍼텍스트 에디팅 시스템(HES)을 만들어 전자문서 작성의 길을 열었으며, 최초의 하이퍼텍스트 시스템으로 인정받고 있다. 1968년에는 이런 과정이 본격적으로 가시화되기 시작했다. 그래픽 사용자 인터페이스(GUI) 방식의 선구자로 불리는 더글라스 엥겔바트(Douglas Carl Engelbart)는 마우스를 발명하여 계산기 분야에 머물렀던 컴퓨터 사용 분야를 일상생활 분야로 확장시켰다. 1968년 12월 9일, 더글라스 엥겔바트는 멘로파크 스탠포드 연구소의 증강연구센터(ARC)에서 90분 간의 공개 시범을 보였다. 여기에서 그가 1962년부터 연구한 논쟁 관련 결과물과 온라인 시스템(NLS) 등이 포함된다. 이 자리는 마우스가 처음 선보인 자리로 유명하며, 마우스는 이날 선보인 혁신적인 기술 중 일부에 불과했다. 또한, 하이퍼텍스트를 포함해 객체주소와 동적 파일 링킹 등의 개념이 이때 선보였다.
1968년 이후, 더글라스 엥겔바트에 의해 하이퍼텍스트 환경이 구현된 하이퍼텍스트의 연구 속도는 빨라졌다. 1972년에서 1975년에 연구된 조그(ZOG)를 거쳐 1978년에는 매사추세츠 공과대학교(MIT) 아키텍처 머신 그룹의 앤디 리프먼(Andy Lippman)이 '아스펜 무비 맵(Aspen Movie Map)'이라는 하이퍼 미디어 시스템을 처음 개발해 텍스트 외의 다양한 매체 활용 가능성으로 확대시켰다. 1984년에는 매킨토시(Macintosh)를 위한 하이퍼미디어 데이터베이스인 '파일비전(Filevision)'이 선보이게 된다. 또한, 1987년에는 첫 번째 하이퍼텍스트 컨퍼런스(Hypertext Conference)가 애플(Apple) 컴퓨터를 포함한 23개 회사와 벨통신연구소, 하버드 대학교(Harvard University), 제록스의 팰로앨토 연구소(PARC) 등 29개 연구기관의 협조로 열렸다. 이때부터 하이퍼텍스트는 본격적으로 많은 기업과 기관이 참여하는 분야로 확산되기 시작했으며, 1987년에는 매킨토시에서 빌 앳킨슨(Bill Atkinson)이 만든 하이퍼카드(hypercard)라는 프로그램을 선보이면서 전문가들 사이에서 연구되던 하이퍼링크 개념이 일반인에게 보급되는 하이퍼링크 역사에서 빼놓을 수 없는 제품이 출시되었다. [4]
특징[편집]
장점[편집]
하이퍼링크는 파란색 밑줄이 쳐진 친숙함은 디자인 요소로써 그 지속성을 설명하는데 도움이 된다. 수년간 시각화에 대한 시각을 계속 발전시켜왔던 닐슨은 '일관성은 링크 생상의 의미를 유저에게 가르치는게 핵심이다'라고 말했다. 파란색은 역사적으로 일관성을 제공해왔고 파란색과 클릭 가능성의 심리적 유대를 강화시킬 수 있었다. 파란색 하이퍼링크는 가장 흔항 유형의 색맹을 가진 사람들이 겪는 접근성 문제를 피해갈 수 있다. 사용자가 색을 보는데 문제가 있더라도 관습적 하이퍼링크에 사용되는 밑줄이 색상을 대신하여 링크임으로 표현해준다. 즉, 파란색을 인지하지 못하는 색맹일 경우에도 링크를 알아차리는데에 문제 없다는 의미이다. 밑줄이는 또 다른 이점을 지니고 있는데, 함부르크 대학교에서 진행한 2003년도 연구에 따르면 밑줄 쳐진 링크는 텍스트 안에서 서서브 헤딩과 같은 기능을 하게되어, 사용자가 내용을 훑어볼 때 중요한 정보로 사용자에게 안내해주게된다. 밑줄은 다른 효과를 더해주지않더라도 링크를 찾기 쉽게 만들어 주기도하며 클릭률을 높여주기도 한다.[5]
단점[편집]
하이퍼링크로 자주 사용되는 디자인인 파란색에 밑줄은 접근성 문제를 전부 해결해주진 못한다. 카린 그레이브스(Karyn Graves)의 연구에 따르면 나이가 많은 사용자들은 사실 파란색을 인지하는데 더 큰 문제를 겪는다. 눈은 시간이 흐를수록 다른색보다 파란색을 인지하는데 덜 민감해지게 되어, 나이가 듦에 따라 파란색에 초점을 맞출 수 있는 능력이 떨어지기 때문이다. 온라인 사용자의 연령대가 높아질수록 기존에 사용하던 하이퍼링크의 디자인이 바뀔 수도 있다. 하이퍼링크는 밑줄에도 해당된다. 밑줄의 방해속성은 대충 훑어보는 사람들에게 더 두드러지게 나타나지만, 보다 일반적인 수준에서 가독성을 방해하기도 한다. 밑줄이 텍스트를 보는 자연스러운 시선의 흐름을 방해하며, 쉽게 읽을 수 있는 문자 사이에 끼어들기도 하고 판독하기 어렵게 만들기도 한다. 이러한 가독성에 미치는 부정적인 영향은 구글의 링크 디자인에 영향을 미치게 된다. 2014년, 구글은 가독성을 개선하고 전반적으로 말끔한 외관을 만들기 위해 광범위한 인터페이스의 미니멀리즘 유행과 플랫 디자인 유형을 적용시킴으로써, 링크 또한 밑줄을 제거했다.
파란색 밑줄 하이퍼링크의 단점은 디바이스 사용이다. 파란색 밑줄 하이퍼링크가 생겨났을 당시, 아무도 주머니에 항상 넣고 다닐수있는 강력한 미니 컴퓨터인 스마트폰이 등장할 것이라고 상상하지 못했다. 터치스크린과 웨어러블은 디바이스와 상호작용하는 방식에 혁명을 일으켰고, 하이퍼링크는 모바일 디바이스에서 투박해보이기 시작했다. 클릭하기도 어려웠을뿐더러 보통 엄지손가락 영역 밖에 있기도 했으며, 여러 페이지를 넘나드는 것은 사용자에게 불편을 야기했다. 앤서니티(AnthonyT)는 링크는 어떻게 클릭해야하는지 사용자가 고민하게 만들면 안된다고 말했다. 만약, 사용자가 애플리케이션 사용에 집중하지못하고 링크를 클릭하려면 손가락을 어떻게 움직이고 방향을 잡고 돌려야 하는지 등에 집중해야한다면, 이는 애플리케이션 사용 경험이 떨어지게 되기 때문이다.[5]
사용성[편집]
하이퍼링크는 시각화 방법과 상관없이, 사용성을 보장하기 위해 널리 적용되어야 하는 기본적인 디자인이 있다. 먼저, 유의미한 텍스트를 하이퍼링크에 연결해야 한다.예를 들면, 클릭(click here) 텍스트와 같이 정확히 무엇을 클릭하게 되는지 어떠한 의미도 알 수 없는 텍스트에 링크를 연결하는 것은 사용자에게 추가 정보를 찾도록 암암리에 강요받는 느낌을 줄 수 있다. 사용자는 스파이웨어를 조심해야하기 때문에 링크를 클릭하면 어디로 가는 것인지 텍스트로 알려줘야한다. 또한, 파란색 텍스트는 제거한다. 사용자는 파란색 텍스트는 링크가 연결돼있을 거라는 기억 때문에, 파란색 텍스트를 보면 클릭 가능성을 떠올리게 된다. 파란색 텍스트가 클릭 되지 않거나 링크가 연결돼 있지 않으면, 사용자들은 이에 대한 불만이 생길 수 있다. 사용자에게 혼동을 주지않기 위해서 링크가 연결되있지않은 텍스트는 되도록 파란색 텍스트를 사용하지않는것이 좋다. 하이퍼링크는 링크를 분명히 보이게 만든다. 사용자가 링크를 찾기 위해 반드시 인터페이스와 상호작용해야되게 링크를 생성해서는 안된다. 해당 페이지에서 링크가 사용자의 눈에 잘 띄일 수 있도록 만들어야하며, 한 가지 하이퍼링크 디자인을 고르고, 해당 디자인을 고수해야한다. 사용자의 혼동을 사전에 방지하기 위해 한 사이트 안에서는 링크를 시각화하는 방법이 다양해서는 안된다. 링크가 걸린 텍스트의 디자인을 하나로 고정하고, 해당 디자인은 링크가 연결되는 텍스트마다 적용하는것이 적합하다.
하이퍼링크의 방문한 링크는 표시해야한다. 클릭했던 링크는 파란색이 아닌 물 빠진 색감으로 톤을 바꾸거나 구글에서 클릭한 링크를 파란색에서 보라색 계열로 바꾸는 것처럼 파란색이 아닌 다른 색상의 계열로 바뀌게 함으로써, 사용자에게 클릭했던 링크임을 알려주어야 한다. 또한, 마우스 오버 모양이 생성되어야한다. 사용자가 링크가 연결된 텍스트에 마우스를 올려놓으면 마우스 모양이 바뀌어야 하는데, 이는 사용자에게 해당 텍스트는 링크가 연결되어 클릭이 가능하다는 것을 강조하여 알려주는 효과를 줄 수 있다. 마지막으로, 텍스트의 크기가 여유 있어야 한다. 링크가 연결된 텍스트의 크기를 여유있게 만들어서 모바일이나 터치 스크린 같은 손가락을 사용해야 하는 기기를 고려하여, 링크 주변에만 가더라도 쉽게 클릭할 수 있도록 해야한다.[5]
링크 방식[편집]
링크를 연결시키기 위해선 〈a〉태그를 사용하고, 태그 안에서 선언하는 속성들을 이용하여 하이퍼링크를 생성한다. 문자로 링크를 연결하는 방식은 링크태그의 기본이다. 즉, 문자를 클릭해서 링크를 타고 들어갈 수 있도록 연결하는 방식이다. href 속성은 URL을 지정해주고, target속성은 링크된 페이지를 어떻게 열어줄 것인지를 지정해준다.[6]
예제) <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으로 지정해주는 속성으로 반드시 필요하다. [7]
예제) <a href="http://wiki.hash.kr/index.php/%EB%8C%80%EB%AC%B8"><img src="이미지url" border="0"/></a>
- 이메일
- 이메일로 링크는 링크가 걸린 텍스트를 클릭하면 자동으로 전자우편 메시지를 작성할 수 있도록 메시지 작성창이 뜨며, 수취란(받는 사람)에 이메일 주소가 자동으로 입력되도록 하는 방식이다. 이메일 링크 방식 사용시에 href 속성에 시작을 반드시 'mailto:' 로 시작해야한다. [7]
예제) <a href="mailto:test1234@naver.com">test1234에게 메일 보내기</a>
- 웹 페이지 내부
- 웹 페이지 내부로 링크는 책갈피 기능을 의미한다. 책갈피 기능이란 하나의 html 문서가 내용이 너무 길어서 한 화면 안에 모두 표시하지 못할 경우 문서의 특정 위치에 이름을 붙여두고, 그 곳으로 하이퍼링크를 시켜서 이동할 수 있도록 하는 기능이다. 또한 이 기능은 특정 내용이 있는 곳으로 빨리 이동할 수 있다.[7]
예제) <a name="test">텍스트 또는 이미지</a> <a href="#test">길이가 긴 텍스트나 여러개의 이미지</a>
- 기타 파일
- 기타 파일로 링크는 음악이나 동영상을 클릭해서 띄우거나, 압출파일, 프로그램 등을 클릭해서 다운받을 수 있게 링크하는 방식이다.[7]
예제) <a href="**.exe">파일 다운로드 받기</a> <a href="**.wav">미디어 열기</a> <a href="**.asw">동영상 열기</a>
종류[편집]
- 단순링크(simple link) : 링크를 원하는 웹 사이트의 메인페이지를 링크하는 것을 의미한다. 사용자는 디지털뉴스 제공 웹사이트를 단순링크하는 방법으로 자유롭게 사용할 수 있다. 또한, 여러 개의 언론사들의 홈페이지를 하나의 웹사이트에 나열하는 방법도 가능하다.[8]
- 직접링크(deep link) : 특정 웹사이트의 메인페이지를 링크한것이 아니라 그 하위 페이지나 특정 웹페이지이다. 특히, 개별사이트나 사진을 직접링크한 경우를 말한다. 사용자는 한개나 여러개의 기사를 그 URL과 기사의 제목을 링크 수단으로 하여 직접린크 방식으로 이용한다. 사용자는 한개의 기사를 URL과 그 기사의 제목과 해당 기사 본문의 일부를 함께 표시하는 방법으로 직접링크할 수 있다. 이같은 방식이 반복적으로 이루어지게 되면, 금지되어 여러개의 기사를 URL, 기사의 제목, 해당 기사 본문의 일부를 함께 표시하는 방법으로는 직접링크할 수 없다. 또한, 검색 서비스 제공자는 사용자의 질의를 받아 검색 결과를 링크방식으로 표출하더라도 디지털 뉴스를 서비스 제공 목적으로 사요하여 저작권자와 계약 등을 통해 권리를 위임받아 서비스를 제공해야 한다.[8]
- 프레임링크 (frame link) : 자신의 웹사이트 윤곽과 광고 속에서 타인의 웹사이트 정보가 나타나도록 타인의 웹사이트나 웹페이지를 링크하는 것이다. 협회 회원사가 제공하는 웹사이트의 특정 디지털 뉴스와 영상에 대한 프레임과 그 메인 페이지에 대한 프레임도 금지된다. 프레이밍 링크(framing link)라도고 불린다.[8]
- 임베디드 링크(embedded link) : 링크된 정보를 호출하기 위해 사용자가 클릭할 필요없이 링크 제공 정보를 포함한 웹페이지에 접속하면 자동으로 링크된 정보가 바로 재생되는 방식의 링크를 말한다.[9]
각주[편집]
- ↑ 〈하이퍼링크(hypertext)〉, 《사이언스올》
- ↑ 하이퍼링크 리그베다위키 - http://rigvedawiki.net/w/%ED%95%98%EC%9D%B4%ED%8D%BC%EB%A7%81%ED%81%AC
- ↑ 하이퍼링크 위키백과 - https://ko.wikipedia.org/wiki/%ED%95%98%EC%9D%B4%ED%8D%BC%EB%A7%81%ED%81%AC
- ↑ IT문화원강좌, 〈하이퍼링크의 역사(History of Hypertext)〉, 《아이티문화원》
- ↑ 5.0 5.1 5.2 UX컨설턴트 전민수, 〈brunch, 하이퍼링크 UX 가이드라인〉, 《브런치》, 2016-10-19
- ↑ 깨비형, 〈10. 하이퍼링크(Link) 태그〉, 《티스토리》, 2013-02-02
- ↑ 7.0 7.1 7.2 7.3 에브리씽씽, 〈(하이퍼링크) <a>태그 / target 종류〉, 《티스토리》, 2014-11-28
- ↑ 8.0 8.1 8.2 〈저작권 안내〉, 《한겨례》
- ↑ 남중구 변호사, 〈“임베디드 링크는 저작권 침해 방조 행위”〉, 《벤처스퀘어》, 2017-10-10
참고자료[편집]
- IT문화원강좌, 〈하이퍼링크의 역사(History of Hypertext)〉, 《아이티문화원》
- Bu Zhong, 〈Ted Nelson Predicts the Text in the Future〉, 《쓰라이브글로벌》, 2017-08-29
- brunch, 〈하이퍼링크 UX 가이드라인〉, 《매거진》, 2016-10-19
- 〈하이퍼링크(hypertext)〉, 《사이언스올》
- 하이퍼링크 리그베다위키 - http://rigvedawiki.net/w/%ED%95%98%EC%9D%B4%ED%8D%BC%EB%A7%81%ED%81%AC
- 하이퍼링크 위키백과 - https://ko.wikipedia.org/wiki/%ED%95%98%EC%9D%B4%ED%8D%BC%EB%A7%81%ED%81%AC
- 남중구 변호사, 〈“임베디드 링크는 저작권 침해 방조 행위”〉, 《벤처스퀘어》, 2017-10-10
- 〈저작권 안내〉, 《한겨례》
- 에브리씽씽, 〈(하이퍼링크) <a>태그 / target 종류〉, 《티스토리》, 2014-11-28
- 깨비형, 〈10. 하이퍼링크(Link) 태그〉, 《티스토리》, 2013-02-02
같이 보기[편집]
