Tweet Search

WebGL

PC에서 3D 기술은 표현하기 위해서는 OpenGL을 사용합니다.

이 OpenGL을 웹에서 작업할 수 있게 하는 기술이 바로 WebGL입니다.

WebGL을 사용하면 JavaScript 코드만으로 웹에서 3D를 표현하는 게 가능해지게 되죠.

WebGL을 사용해서 3D를 표현할 때 가장 많이 사용하는 라이브러리가 Three.js입니다.

---

Tweet Search

기존에 트위터 검색 사이트들은 검색결과 목록들을 전부 리스트 형식으로 보여주고 있었습니다.

Tweet Search는 이 트윗 결과 목록에 Three.js를 도입하면 전체적인 결과에 대해 한눈에 파악할 수 있지 않을까 하는 생각에 시작된 사이트입니다.

검색 결과 예

여기에 리트윗 횟수에 따라 배경색의 변화를 주어서 어떤 트윗들이 인기가 있는지 바로 확인할 수 있도록 만든 것이 특징입니다.

리트윗 횟수에 따라 배경색이 다르게 나옵니다.

또한, 검색수, 트윗 수, 댓글 수 등 사용자 반응을 분석한 다음의 소셜픽 API를 사용하여 현재의 중요한 이슈를 보여주고 있어, 현재 이슈에 대한 사람들 반응이 어떤지 확인할 수 있습니다.

---

지원 브라우저

http://caniuse.com/#feat=webgl

caniuse란 사이트에서 WebGL을 지원하는 브라우저 확인이 가능합니다.

Chrome의 경우 웬만한 버전에서는 WebGL을 지원하는군요.

그래서인지 WebGL으로 개발된 사이트의 경우 대체로 Chrome 사용을 권장하고 있습니다.

자신의 브라우저가 WebGL을 지원하는지 정확한 확인을 위해 아래 사이트로 접근해 보도록 하죠.

https://get.webgl.org/

Your browser supports WebGL

이라고 뜬다면 당신의 브라우저는 WebGL을 지원한다는 것입니다.

---

URL

아래 주소로 접근 가능합니다.

http://tweetsearch.org

(현재는 운영하고 있지 않습니다.. ㅜㅜ)

---

Tech Stack

Tweet Search에서 사용한 기술스택은 다음과 같습니다.

Libraries

jQuery, Three.js

Data Stores

MySQL 

Languages & Frameworks

Java, JavaScript, Spring, Metro UI CSS 

Application Hosting

Amazon EC2, Apache HTTP Server, Apache Tomcat 

Build, Test, Deploy

Eclipse 

Utilities

Google Analytics, Discus

---

추천 사이트

Three.js를 사용하여 구현한 사이트 중 개인적으로 상당히 훌륭하다고 생각되는 사이트 몇 개를 소개해드립니다.

1. http://www.ro.me (강추)

미국 음악 프로듀서 Danger Mouse와 이탈리아 작곡가 Daniele Luppi이 쓴 앨범 Rome의 홍보 사이트입니다.

2. http://www.findyourwaytooz.com/

디즈니 영화 오즈 그레이트 앤드 파워풀의 홍보 사이트입니다.

3. https://triggerrally.com/

니드포스피드의 웹버전이라고 생각하시면 됩니다.

4. http://www.shapespark.com/

인테리어 관련 사이트입니다. 나중에는 WebGL을 활용하여 모델하우스를 대체 할 수 있겠다는 생각이 들더군요.

이외에도 굉장히 멋진 사이트들이 많으므로 WebGL에 관심이 많으시면 직접 찾아보시는 것도 좋을 것 같습니다.

아마 여기 있는 사이트들을 다 구경하시고, 이후에 제가 만든 사이트를 보게 될 경우

제 사이트는 오징어로 전락할 것이기 때문에 위 사이트들은 천천히 구경해 주세요 ^^;