Skip to content
TUWLAB.com
일반

페이스북 글 입력 필드 분석

Posted 2013. 03. 20 Updated 2017. 06. 02 Views 10169 Replies 0
Atachment
첨부

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

실시간 자동완성 구현이나 채팅 등 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 구조가 더 간단했을것이라는 소견입니다.


서비스 선택
이용중인 SNS 버튼을 클릭하여 로그인 해주세요.
SNS 계정을 통해 로그인하면 회원가입 없이 댓글을 남길 수 있습니다.
댓글
?
Powered by SocialXE

List of Articles
번호 분류 제목 글쓴이 최근 수정일 조회 수
191 일반 회전거울을 사용한 3D 디스플레이 file TUW 2017.06.02 6387
190 일반 형광등기구 안정기 교환 file TUW 2017.06.02 10729
189 Linux 한글 입력기 나비(Nabi)에서 한/영 키가 인식되지 않는 경우 file TUW 2017.06.02 1177
188 일반 하드디스크 작동 모습 TUW 2013.01.07 9786
» 일반 페이스북 글 입력 필드 분석 file TUW 2017.06.02 10169
186 일반 트랜지스터의 회로기호와 핀 명칭 file TUW 2017.06.02 9952
185 Linux 좀 더 '진짜같이' VirtualBox 활용하기 - 심리스 모드 외 file TUW 2017.06.02 33558
184 일반 제트엔진의 작동원리 동영상 TUW 2014.04.16 7729
183 일반 정규식(Regular Expression)에 대한 소개와 입문, 튜토리얼 1 file TUW 2017.12.11 22725
182 일반 전력선 통신(PLC; Power Line Communication) TUW 2014.04.16 9947
181 일반 영어로 나타낸 수학 용어 모음 2 file TUW 2018.01.08 18826
180 Android 안드로이드 개발 관련 참조사이트 TUW 2014.04.20 17685
179 Android 안드로이드 가상머신을 활용하여 PC에서 카카오톡 사용하기 file TUW 2017.06.02 18867
178 Android 안드로이드 Hello, World?! file TUW 2017.06.02 17103
177 Android 안드로이드 AVD에 한글 키보드 설치하기 file TUW 2017.06.02 18317
176 일반 신호 레벨 변환 회로(Level Transceiver/Translator/Shifter) 설계 file TUW 2019.05.27 24919
목록
Board Pagination Prev 1 2 3 4 5 6 7 ... 12 Next
/ 12

Powered by Xpress Engine / Designed by Sketchbook

sketchbook5, 스케치북5

sketchbook5, 스케치북5