아티클

링크안에 링크 넣기

유무 2016-01-06 15:37:25

안녕하세요. UI개발실 곽석종입니다.

마크업 작업중에 가끔 마주치게 되는 링크안에 링크 넣기를 해결하는 방법을 몇가지 정리해보았습니다.
디자인은 아래와 같았습니다.
아래 이미지에서 회색 부분이 외부 링크 영역입니다.
링크안 링크 디자인

1.링크안에 링크가 있는 디자인을 없앤다. (?!)

당연히, 링크 안에 링크가 있는 디자인이 나오지 않게 하는것이 가장 좋습니다.
실제로 페이스북은 이런 형태가 없도록 구성하고 있습니다.
아래 캡처는 페이스북페이지에서 링크 영역을 붉은 상자로 표시한겁니다.

페이스북 링크 형태
자세히 보시면 링크 영역이 생각보다 좁게 설정 되어 있다는걸 알 수 있습니다.
하지만, 모바일에서의 터치는 기기마다 터치 영역 보정이 있기 때문에, 근처만 누르더라도 잘 감지하여 터치 이벤트로 인식합니다.

물론 저는 위처럼 디자인 자체를 바꿀 수 없기 때문에 아쉽게도 이 방법은 불가합니다.

2. 외부링크는 별도의 링크로 영역을 덮고, 내부링크는 z-index를 이용.

예전 네이버 뉴스 기사 리스트 형태가 위와 같은 형태였습니다.
과거 네이버 뉴스리스트 링크 영역
별도의 a태그로 영역을 덮고, 내부 링크는 z-index를 이용하여 클릭되도록 구성합니다.
링크 클릭도 원하는데로 작동하며, 접근성 측면에서도 좋은 형태이고, 별도의 JS구성 없이 만족할 수 있지만,
내부 요소에 대한 선택을 제대로 할 수 없게 된다는 문제(텍스트 복사등...)가 있습니다.

저의 경우는 이 형태로 구성하여 해결했습니다.
이유는 제 경우에서는 내부 영역 텍스트를 선택할 일이 없다고 판단해서 입니다.

3. 외부링크를 JS를 이용하여 작동하도록 구성.

트위터와 네이버 실시간 검색 부분에서 사용중인 방법입니다.
네이버 실시간 검색의 캡처는 아래와 같습니다.
실시간 검색 링크 영역
이 형태도 링크 안에 링크로 자주 등장하는 형태입니다.

원문글과 그 안에서 별도의 링크를 제공하는 형태인데, 원문글에 대한 링크는 JS를 통해 별도로 구성하도록 합니다.
위와 같이 구성하면, html만 보고 있을 경우 외부 영역이 링크인지 전혀 알 수 없게 됩니다.
대신 2번 형태와는 다르게 해당 텍스트를 자유롭게 선택할 수 있습니다.

4. 2번과 + 3번의 복합 형태

위에서 설명한 2번과 3번 형태를 합칠수도 있는데요.

2번에서 사용한 링크영역을 덮는 외부 링크를 안보이는 형태로 남겨만 두고,
3번의 span요소의 클릭을 별도의 외부 링크 요소의 클릭 이벤트를 전달하는 방법입니다.

두 개를 섞어서 각각의 단점을 보완이 됩니다.
대신, 2번과 3번보다는 소스가 복잡해지지만, 접근성측면으로 보면 이렇게 구성하는게 맞겠죠?


주구장창 설명했지만... 아무래도 예제가 가장 좋다고 생각합니다.
2,3,4 번의 경우에 대해 예제를 만들어 보았습니다.

구현 내용은 아래 주소로 확인해주세요~!
예제 보러가기


제가 정리한 내용은 여기까지입니다.
이 외의 더 좋은 방법이 있거나, 다른 방식으로 해결하신게 있다면 말씀해주세요~!

긴 글 읽어 주셔서 감사합니다.

댓글 0
댓글을 작성하려면 해주세요.