Skip to content
TUWLAB.com
모든 게시물에 대하여 '링크'
방식의 퍼가기만 허용합니다.
한양대학교 전자통신컴퓨터공학부
바라미
  • 237
  • 2554923
DNS Powered by DNSEver.com
일반

페이스북 글 입력 필드 분석

Posted 2013. 03. 20 Updated 2017. 06. 02 Views 10412 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
번호 분류 제목 글쓴이 최근 수정일 조회 수
27 일반 [Windows 7] 흔들어 전체 창 최소화(Aero Gesture) 기능 끄기 10 file TUW 2017.06.02 21947
26 일반 [AutoHotkey] 단축키(Hotkey) 스크립트 작성과 자동 시작 등록 file TUW 2021.12.28 23006
25 일반 [HTML] 페이지 자동 이동 - Redirect TUW 2014.03.19 23605
24 일반 [적외선 통신] IR 송수신 소자, IR 송수신 회로 file TUW 2021.12.28 23892
23 일반 AutoCAD 자주 사용하는 명령어 요약 정리 TUW 2014.04.24 25387
22 일반 [GIT] Commit하고 원격 저장소로 내보내기: add, reset, commit, push TUW 2018.01.18 27353
21 일반 [GIT] GIT이란 무엇인가, GIT에 대하여 file TUW 2017.06.02 27663
20 일반 PSpice 시뮬레이션 결과창에서 Search Command 사용하기 file TUW 2017.06.02 31305
19 일반 [GIT] 병합하고 Commit 재정렬하기: cherry-pick, rebase, merge file TUW 2017.06.02 32107
18 일반 [WSL] Windows Subsystem for Linux - 디스플레이 서버 설정 및 GUI 사용하기 file TUW 2021.12.28 32288
17 일반 정규식(Regular Expression)에 대한 소개와 입문, 튜토리얼 1 file TUW 2017.12.11 36226
16 일반 [사설 클라우드 구축] 자동 동기화 설정 (FreeFileSync) 2 file TUW 2017.06.02 38949
15 일반 [GIT] Patch 만들기 및 적용하기: format-patch, am TUW 2015.01.10 40479
14 일반 [포토샵] 사진 가장자리 투명하게 처리하기 file TUW 2017.06.02 42150
13 일반 [WSL] Windows Subsystem for Linux - SSH 서버 세팅하기 file TUW 2021.12.28 42798
12 일반 Windows 7에서 보호된 노트북 복구파티션 삭제하기 file TUW 2017.06.02 44032
목록
Board Pagination Prev 1 2 3 4 Next
/ 4

Powered by Xpress Engine / Designed by Sketchbook

sketchbook5, 스케치북5

sketchbook5, 스케치북5