일반

페이스북 글 입력 필드 분석

Posted 2013. 03. 20 Updated 2017. 06. 02 Views 10678 Replies 0
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄

페이스북을 볼 때마다 느끼는 거지만, 이건 웹브라우저로 보고 있으면서도 도무지 웹페이지라는 느낌이 들지를 않습니다.

실시간 자동완성 구현이나 채팅 등 Ajax를 이용한 요소들 때문에 의한 걸 제외하더라도, 무엇보다 UI가 보통의 웹페이지와는 많이 달라서 그런 느낌이 많이 드는 것일 것입니다.

업로드한 사진에서 얼굴을 인식해서 태깅 위치를 자동으로 알려주거나 하는 등 소위 '웹 페이지'가 하기에는 다소 생소한 이런 기능들도 이런 느낌을 만드는 데 한 몫 하고 있을 것입니다.


그중에서도 입력 필드에 @를 사용해서 이름을 입력하고, 사람을 소환하는 기능은 웹 개발을 조금이라도 해 본 사람에게는 신기한 기능으로 다가올 것입니다.

"어..떻게 INPUT필드나 TEXTAREA에 입력한 글자에 링크를 걸고 하이라이트를 할 수 있는 거지?"

페이스북의 입력 상자는 Editable Iframe이 아닌 Textarea입니다.

TextArea는 전체적인 내용 스타일을 지정할 수 있을지는 몰라도,  입력 내용의 일부 텍스트만 굵게 하거나 배경 하이라이트를 하는 등의 스타일 지정은 불가능합니다.

그러나, 페이스북에서는 실제로 이걸 구현하고 있습니다. 과연 어떻게...??


그동안 '어떻게 잘 구현 해 놓았겠지. 알게 뭐야 -ㅅ-'로 일관하다가, 최근 그것과 유사한 UI를 제작해야 할 일이 생겨서 페이스북 입력창을 분석해 보았습니다.

뭔가 대단한 게 있을 줄 알았던 기대와는 달리, 하이라이트 필드는 간단한 트릭(이라 쓰고 꼼수라 읽는다..)으로 구현된 것이었습니다.

facebook_highlight.png
▲ 페이스북 글 입력 필드

우선 글을 입력하는 부분은 TEXTAREA가 맞습니다. 핵심은, 이 TEXTAREA가 DIV 레이어에 의해 공중에 띄워져 있으며, z-index는 높은 값으로 설정되어 있다는 점입니다. 배경색은 투명(transparent)입니다.

TEXTAREA 바로 아래에 깔려 있는 DIV 레이어가 바로 하이라이트 구현의 핵심인데, TEXTAREA의 배경색이 투명이므로 이 레이어의 내용은 입력한 글의 아래에 비쳐 보이게 됩니다.

이 '깔린' 배경 레이어(하이라이트 레이어라 하자.)는 모든 CSS 속성이 TEXTAREA의 그것과 동일하게 지정되어 있다. 즉, 같은 내용으로 채워지면 TEXTAREA에 입력한 것과 완전히 똑같이 보이게 된다는 의미입니다.

사용자가 입력 필드에 글을 입력하면, 이 깔려 있는 하이라이트 레이어에 입력한 내용이 그대로 복사됩니다. (이쯤 이야기 하면 감이 올 것입니다.)

그리고 @ 기호 등을 사용해서 태깅을 하게 되면 해당 TEXT를 찾아서(regex등 이용) <B> 요소로 Wrapping해 줍니다. 위 그림에 든 예시에서 '@Jaehun Yu'라고 입력을 하면 하이라이트 레이어에는 <B>Jaehun Yu</B>라고 입력이 되는 것이다. (물론 '@' 기호는 자동으로 제거되고, 태깅된 사람의 user_id 등의 정보가 별도 위치에 저장됩니다.)

하이라이트 레이어의 <B> 요소에 Gradient 등의 속성이 지정되어 있으면 위와 같이 태깅된 이름에 배경이 둘러싸인 것처럼 표시되게 되는 것입니다.


위 그림에는 TEXTAREA가 떠 보이지 않고 하이라이트 레이어의 내용과 겹쳐 있는것처럼 보이는데, 이는 CSS를 통해 레이어를 띄운 것이 아니라 페이지 로드 후 스크립트를 사용하여 Float 시켰기 때문입니다.

UI적인 면에서 보기에는 좋은 효과지만, 내부 구현을 들여다보면 지저분하기 짝이 없는 효과인 것입니다.

동일 효과를 구현하기 위해 이런 방법 대신 Editable Iframe을 활용해서 구현했더라면 스크립트나 DOM 구조가 더 간단했을것이라는 소견입니다.