엮인글 주소/ 글 주소 복사 부분의 사용성 문제

다음 블로그가 점점 좋아지고있습니다.

예전부터 불편했던 부분 적어볼게요. 잘 생각해보니 요 근래에 제가 적는 사용성 문제들은 평소에 가지고있던 불편한 부분이 어느정도 축적되고 반복 경험하여 일정 임계치를 넘으면 제 머릿속에 "써야겠다" 하고 떠오르는것 같더군요.

오늘 말할 부분은 평소에 아주 불편하게 느껴왔던 엮인글 주소와 글 주소를 복사하는 부분입니다.

위는 다음 블로그의 글 영역 윗부분입니다. 제가 복사할 주소가 오른쪽에 보이지요? 보통 InternetExplorer 사용자의 경우, [복사]버튼을 누르면 잘 복사가 됩니다. 하지만 FireFox나 타 브라우저의 경우, 저게 동작하지 않습니다. 브라우저에서 지원하지 않는 기능이기 때문이지요. 그래서 타 브라우저 유저의 경우 마우스로 긁어서 복사하게 됩니다

설명의 편의를 위해 색으로 영역 구분을 하였습니다. 각각 파란색, 노란색, 붉은색, 초록색, 연두색이라 호칭합니다. 주소의 앞, 주소 영역, 붉은색 틈, 녹색 복사 버튼 위, 연두색 복사버튼 오른쪽이 되겠네요.

일단 넉넉하게 복사하기 위해 파란색 영역에서 마우스를 클릭하고 오른쪽으로 잡아당기면 저렇게 수정, 삭제, 공개 부분까지 자동으로 선택됩니다. 이 경우 복사해서 붙여넣어보면

* 공개* 통하는 블로그* 비공개* 수정* |* 삭제* |* 공개* |* 엮인글 보내기* http://blog.daum.net/miriya/15600706

이런게 나옵니다. 난감하죠. 깔끔하지 못하죠. 만약 텍스트로 붙여넣지 않고 에디터에 붙여넣었다면..

• 공개
• 통하는 블로그
• 비공개

• 수정
• |
• 삭제
• |
• 공개
• |
• 엮인글 보내기
• http://blog.daum.net/miriya/15600706

이렇게 나와버립니다. 에그.. 이러면 안되겠죠?

이번에는 역순으로, 연두색 영역, 즉 복사버튼 오른쪽에서 왼쪽으로 끌어봅니다.

아.. 복사 버튼이 함께 선택이 되네요. 이 경우 텍스트로 붙여넣으면

#  http://blog.daum.net/miriya/15600706  복사 

이렇게 들어가고, 에디터로 붙여넣으면

• http://blog.daum.net/miriya/15600706

이렇게 들어가지요. 이것도 모양이 썩 좋지 않습니다.

이번에는 붉은색 영역, 즉 복사 버튼과 주소 영역 사이에서 시작하여 왼쪽으로 끌어봅니다.

주소 바로 앞까지 아슬아슬하게 선택합니다.

만약 몇픽셀만 더 나가면 이렇게 앞쪽까지 선택되어버립니다. 어렵네요.

이런 부분에서 사용성 저해가 일어납니다. 다른 말로 하면.. 짜증이 나게 되는거지요.

이번에는 트랙백 부분입니다.

트랙백 부분도 별반 다르지 않습니다. 복사 버튼을 사용 못하니 잘 피해서 눌러야 합니다.

붉은 영역에서 시작하여 파란색 영역 바로 전, 노란색 영역의 끝에서 마우스를 떼야 합니다.

자, 이제 두 경우의 해결책을 생각해봅시다.

일단 태터계열 블로그의 몇몇 스킨에서는 엮인글 주소를 클릭하면 바로 복사가 되게 만들어두었습니다.

이 방법이 트랙백에는 최적이라고 봅니다. 다음 블로그의 경우, 트랙백 주소 클릭 시

javascripｔ:copyTrackback('http://blog.daum.net/miriya/tb/15600706')

이 스크립트가 실행되도록 되어있는데, 이건 FF등의 브라우저에서는 전혀 동작하지 않습니다.

엮인글 주소부터 복사 버튼까지 모두 태터계열의 위 방법을 적용하는게 좋다고 봅니다.

아니면 이런 모양새도 고려할 수 있지요.

위는 유튜브의 동영상 주소 복사 부분입니다.

input form을 사용했는데, 저 안쪽 어디를 클릭하든 주소가 자동으로 전체선택되도록 만들어놨습니다.

복사를 브라우저의 복사 기능에 맏기지 않고 유저가 스스로 하도록 했는데, 꽤 산뜻합니다.

좀 모양을 내고싶으면 이런식으로 background-color와 border를 조절해서 input 스럽지 않게 눈속임할 수도 있겠네요. 일단 트랙백 복사 부분의 해결책은 위의 두가지가 있겠습니다. 더 있으면 좀 알려주시고요 ㅎㅎ

음.. 남은건 글 주소 복사네요.

글 주소 복사의 경우, 위 방법중 첫번째 방법을 사용할 수 없습니다. 왜냐하면 첫번째 방법은 이용자의 주소 클릭을 전제로 하는데, 글 주소는 단순 퍼머링크 복사용에 그치는게 아니라 글 새로고침의 효과도 있기 때문입니다. 제 경우 아주 자주 쓰는 편이지요.

1. 글 주소 복사를 위해 글 주소를 가운데 클릭하여 새 탭을 띄우고, 주소창에서 복사한다.

2. 새 글을 쓰는데, 예전 글을 보며 쓰고싶을 경우, 주소를 가운데 클릭하여 새 탭을 띄워두고 글쓰기 클릭.

이외에도 이유는 몇가지 있겠네요.

근데 정말.. 저는 방금 알아낸 방법인데, 이렇게 하니 한결 쉽군요...

이렇게 쿨한 기능이 있다니.. 여태 드래그하느라 낑낑댄 제가 새삼 사이코라는걸 간절히 느낍니다-_-;;

하지만 일단 가장 좋은 최선의 방법은 저 복사 버튼이 파이어폭스에서도 작동하도록 만들어주는거군요. 저도 인간이고, 저보다 더 허술한 사람들은 많을겁니다. 복사 버튼이 제대로 작동안하는것도 문제고요. 이건 블로그 뿐만 아니라 카페도 마찬가지니 조치 부탁드립니다.