블로그 이미지
윤영식
Frontend Application Architecter, Full Stacker, KnowHow Dispenser and Bike Rider

Publication

Statistics Graph

Recent Comment

'Facebook'에 해당되는 글 2

  1. 2013.09.30 [Smart Visualization] 서비스 디자인 - 5
  2. 2013.01.26 [Twitter Bootstrap] 시작하기

차트는 많은 정보를 내포한다. 사람들끼리 차트를 공유하고 싶을 경우 보통은 엑셀에서 작업을 하고, 보고서를 MS-Word 또는 HWP로 만들어서 메일을 보내거나 채팅창으로 파일을 전송하게 된다. 여러 복잡한 과정을 통하여 자신의 데이터에 대하여 의미를 내포한 차트로 공유하기까지의 과정이 너무 길고 많은 시간이 소요된다. 그리고 지속적인 관심을 가진 데이터라면 이들에 대한 히스토리는 개별 문서마다 보관이 될 것이고, 합쳐서 보고자 할 때 번거로운 재작업을 거쳐야 한다. 우리가 사용하는 페이스북이나 기존 SNS 사용방식처럼 데이터를 시각화한 차트에 대해 공유하여 볼 수 있고, 코멘트를 달고 관련 차트끼리 연결지어서 더 낳은 정보로 만들어 갈 수 있으면 얼마나 재미있을까? 관련성있는 차트들을 모아 보면서 회의에 사용하거나 바로 스마트 기기에서 확인함으로써 업무 효율화를 가져올 수도 있다


이러한 가치하에서 Smart Visualization에 대한 목업화면을 그려 보았다. 



Share Place 

  - Search 입력에 어느 그룹, 코멘트, 의견등의 내용을 검색하여 관련있는 차트 목록을 볼 수 있다

  - 공유하는 공간이다. 차트별로 상단에 자신의 것인지, 어느 그룹과 공유되는 것인지 보이고 등록 시간이 나온다 

     Place : personal 또는 group-01

  - 상단 Place 또는 시간을 클릭하면 해당 차트에 대한 상세 내역을 보여주는 화면이 나온다 

  - 차트 하단에는 해당 차트에 대한 Comment와 관련 차트(Related Chart)를 연결지을 수 있다 

  - 상단 우측에는 현재 채팅진행중이 확인되지 않은 내역 건수와 메세지 건수를 Badge 로 보여준다



Register Place

  - 일정 형식의 .csv 파일을 업로드한다 

  - 해당 차트의 Place (속할 그룹)과 차트 종류를 선택하고 등록한다 



Slide Menu

  - "Smart Visualization" 좌측의 아이콘을 클릭하면 메뉴가 나온다 

  - 개인 또는 그룹을 검색하여 친구맺기를 할 수 있고, 상대가 응답을 해주면 상호 연결이 되어 Share Place에서 차트를 공유한다 

  - 기존 대화목록이나 메세지를 열람할 수 있다

  - 메뉴 상단에 "사용자"검색이나 "그룹" 검색이 들어가겠다

데이터 시각화 차트의 공유에 벗어나는 레이아웃은 제거할 것이다.



* 개념이 유사한 사이트

  https://plot.ly/


  https://infogr.am/


저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식
2013.01.26 00:53 HTML5, CSS3/CSS

트위터의 개발자와 디자이너는 웹 디자이너나 개발자에게 좀 더 나은 삶을 주고자 Bootstrap이라 불리는 프레임워크를 내놓았다. 원문의 Bootstrap 시작하기를 사용해 보고 원문과 함께 정리해 본다. 역시 Bootstrap 사이트에서 따라하기 해보는 것이 가장 좋겠다. 



1. Bootstrap 활용하기 

  - 반응형 레이아웃의 CSS Grid

  - 서체, 버튼, 폼, 테이블, 이미지에 대한 CSS

  - 네비게이션, 프로그레스바, 경고창등의 사용자 인터페이스 컴포넌트

  - 홈페이지에서 다운로드를 할 수 있다

  - 디렉토리 구조 

  


 - HTML 첨부 하기

  

 

  - 반응형 웹사이트 : width가 줄어들면 메뉴형태가 자동 변경 및 레이아웃 자동 조절됨 (데모사이트)

    + 넓이가 넓을때 메뉴 예

     

    + 넓이가 줄어들때 메뉴 변경 예

     



2. CSS Base: Button 

  - <button type="button" class="btn">Default Button</button>

  


  - <button type="button" class="btn btn-success">Button</button>

    <button type="button" class="btn btn-warning">Button</button>

    <button type="button" class="btn btn-danger">Button</button>


  - Bootstrap 스타일은 LESS로 빌드되었다.

   @btnSuccessBackground:              #bce895; //#62c462;

   @btnSuccessBackgroundHighlight:     #a0cd78; //#51a351;


 - 그룹 버튼

  <div class="btn-group">

   <button type="button" class="btn btn-success">Button</button>

   <button type="button" class="btn btn-warning">Button</button>

   <button type="button" class="btn btn-danger">Button</button>

  </div>



3. JQuery Plugin

  - $('#container').tooltip({

      selector: "a[rel=tooltip]"

    });

  <p id="container">Jujubes icing oat cake 

<a href="#" rel="tooltip" title="a Lolipop Tiramissu?">lollipop tiramisu</a>. 

Tiramisu sesame snaps croissant chupa chups chupa chups chocolate cake candy sugar plum 

jelly beans. Lollipop pudding jelly sweet jujubes cookie pudding. Oat cake topping gummi 

bears oat cake. Muffin jelly-o cake sesame snaps ice cream cotton candy.</p>




4. Bootstrap으로 만들어진 괴안은 사이트 

  - leanIX

  - 프리미엄 테마 구매 사이트 (강력추천)

  - 오픈소스 약간 메트로 스타일 사이트



<참조>

  - 원문 : http://www.hongkiat.com/blog/twitter-bootstrap/

  - Bootstrap 시작하기

  - 적은 자원으로 훌륭한 웹사이트를 만들기 위한 9가지 아이디어

  - Bootstrap+Node.js로 SPA 만들기

  - Bootstrap 267 리소스

  - CSS Layout 기초 배우기

  - Bootstrap에 대한 다양한 사용예제 블로그

  - 최근 version 3이 나왔다. 마이그레이션 관련내용

  - Twitter Bootstrap을 확장한 Jasny Bootstrap

  - Facebook 스타일의 Bootstrap 제공

저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식
prev 1 next