Google Hangouts Chat UI 복제 (CSS-Tricks)
Source
Evernote/Technote scraps/Replicating Some Of Google Hangouts Chat Design.md
Summary
이 문서는 Google Hangouts 데스크톱 채팅 인터페이스의 시각적 디자인을 HTML/CSS로 복제하는 과정을 다룹니다. 주요 내용은 세미틱 HTML 구조 정의(section, header, ol/li), 헤더의 펄스 효과를 위한 CSS radial-gradient 및 pseudo-element 애니메이션 구현, 그리고 Flexbox 기반의 채팅 메시지 레이아웃 구성입니다. 2013년 당시의 브라우저 호환성(prefixes)과 아이콘 폰트 사용법도 언급됩니다.
Key Points
- HTML 구조: 전체를
, 헤더를 , 대화 내역을 순서 있는 목록( - )으로 구성하여 의미론적 마크업 적용.
- 헤더 펄스 효과: 새로운 메시지 도착 시 헤더가 빛나는 효과를 위해 radial-gradient를 사용하며, 브라우저 호환성 문제를 피하기 위해 ::before pseudo-element에 gradient를 적용하고 opacity 애니메이션을 활용.
- 채팅 메시지 레이아웃: 각 대화 항목은
- 이며, 아바타와 메시지 그룹()으로 분리. 메시지 내 시간 표시를 위해
- 기술적 고려사항: 2013년 기준 CSS3 속성(radial-gradient, flexbox, animation)의 벤더 프리픽스 필요성 및 Opera 등 일부 브라우저의 제한 사항 언급.