Skip to content
TUWLAB.com
일반

페이스북 글 입력 필드 분석

Posted 2013. 03. 20 Updated 2017. 06. 02 Views 10190 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
번호 분류 제목 글쓴이 최근 수정일 조회 수
113 Linux Ubuntu에서 GIT Client 설치 및 사용하기 TUW 2014.04.24 11994
112 Linux SCP명령어 - 초간단 파일/디렉토리 전송 TUW 2014.04.23 38500
111 Linux Ubuntu에서 저장소(Repository) 위치 변경하기 TUW 2014.04.23 21471
110 Linux 디렉토리를 다른 경로에 마운트하기 (mount --bind) TUW 2018.11.16 22884
109 일반 [Windows 7] 흔들어 전체 창 최소화(Aero Gesture) 기능 끄기 10 file TUW 2017.06.02 20980
108 일반 영어로 나타낸 수학 용어 모음 2 file TUW 2018.01.08 23290
107 일반 [사설 클라우드 구축] 자동 동기화 설정 (FreeFileSync) 2 file TUW 2017.06.02 34209
106 Linux [사설 클라우드 구축] 네트워크 드라이브 연결 (NetDrive) file TUW 2017.06.02 15932
105 Linux [사설 클라우드 구축] 삼바(SAMBA) 서버 구축, 우분투-윈도 공유폴더 구현 file TUW 2017.06.02 23516
104 Linux [사설 클라우드 구축] 기본 조건 및 아이디어 TUW 2014.04.20 12806
103 일반 File Object (<input type='file' />)에 대하여 2 file TUW 2017.06.02 45989
102 Linux [Ubuntu] SSH 초기 접속 속도 향상시키기 TUW 2014.04.23 12804
101 일반 Guided Text Input 구현 1 file TUW 2017.06.02 10580
» 일반 페이스북 글 입력 필드 분석 file TUW 2017.06.02 10190
99 XE XE 1.7.x에서 Alert 함수 재정의(Override) 해제하기 file TUW 2017.06.02 11053
98 XE XE 요소 개발을 쉽고 빠르게 - XE Wizard 2 file TUW 2017.06.02 13646
목록
Board Pagination Prev 1 ... 3 4 5 6 7 8 9 ... 13 Next
/ 13

Powered by Xpress Engine / Designed by Sketchbook

sketchbook5, 스케치북5

sketchbook5, 스케치북5