intropage blog

블로그 이미지
intropage 와 관련된 소소한 이야기들을 공유할게요.
jurohan

Article Category

분류 전체보기 (24)
서비스 소개 (2)
서비스 업데이트 (14)
운영 이슈 (1)
활용 사례 (3)
참고자료 (4)

Recent Comment

Recent Trackback

Calendar

«   2016/04   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

Archive

My Link

  • Total1,948
  • Today0
  • Yesterday0
  1. 2016.04.09
    [기능 소개]사이트에 그래프를 삽입해보세요.

작은 영웅전이라는 타이틀 아래 활동가를 지원하는 프로젝트를 진행하고 있습니다.

소셜 미션을 가진 활동을 실행하는 활동가들에게 프로젝트 사이트를 지원함으로써
프로젝트에 대한 정보 확산과 전달력에 도움을 주는 것을 목표로 진행하고 있습니다.


이들 프로젝트들을 인트로페이지를 통해 지원하다보니, 소셜미션을 가진 프로젝트 중 단기 프로젝트의 경우 모금이 큰 축을 이루고 있는 것을 확인할 수 있었고 현재의 모금 진행상태를 그래프 형태로 보여주는 것이 정보 전달력을 높이는 데 도움을 줄 수 있을 것이라 생각을 하여 '목표달성 그래프' 기능을 제작하였습니다.

1. 목표달성 그래프 만들기

그래프는 페이지 생성 마지막 단계인 '활성화' 단계에서 할 수 있습니다.


그래프를 추가하려면, '그래프 만들기' 버튼을 클릭하면, 그래프 생성창이 출력됩니다. 항목별로 정보를 입력한 후 추가를 누르면, 그래프가 생성됩니다.


그래프가 추가되면, 등록된 내용을 아래와 같이 볼 수 있습니다.

그래프의 삽입위치는 콘텐츠는 본문 콘텐츠의 각각의 영역의 다음 위치에 자동 삽입되도록 할 수 있으며, 직접 삽입 코드를 복사하여 본문 콘텐츠 영역에 직접 추가를 할 수도 있습니다. 삽입코드가 이미지 요소로 되어 있지만, 활성화된 페이지에서는 사이트가 로딩 되면서 이 코드를 그래프 코드로 대체하여 출력됩니다.


그래프는 추가만하면, 활성화버튼을 클릭하지 않아도 바로 활성화 페이지에서 항목을 확인할 수 있으며, 삽입 모습은 아래의 이미지와 같습니다. 그래프 요소 또한 사용자가 CSS 코드를 편집하여 디자인을 수정할 수도 있게 하였습니다.




2. 그래프에 값 삽입하기.

생성한 그래프에 값을 추가하는 것은 Mypage > Dashboard에서 가능합니다.
그래프가 없을 때 사용자들은 본문 콘텐츠에 직접 모금액을 입력하는 업데이트를 해야했는데, 이는 사용자가 정보를 업데이트 하는 데 필요한 단계가 많아지며, 시스템상에서도 모든 콘텐츠 업데이트를 활성화를 해야 반영이 되게 하는 것은 부담을 줄 수 있는 부분이기 때문에 분산화해야하는 필요성이 있었습니다.

그래프 값의 경우 시스템이나 사용자 동선 상 적합할 것으로 판단되어 Dashboard에서 값을 입력하고, 전체 모금액 현황을 볼 수도 있게 구성하였습니다.



값 추가하기 버튼을 클릭하면 값 입력 창이 출력됩니다.

입력할 수 있는 항목은 3가지입니다. 항목명은 기부자명 같이 입력항목의 값을 분별할 수 있는 것을 입력합니다. 입력값 1은 목표량에 반영될 총 값을 입력을 하고, 입력값 2는 보조값으로 입력값 1에서 뺄 금액을 입력할 수 있는 항목입니다. 

만약 모금액의 경우 리워드 등 실제 목표값에서는 제외해야하는 값이 있을 경우 제외할 값을 입력하면 이 값을 뺀 합계가 그래프에 반영되게 해야하기 때문에 입력값 2 항목이 필요했습니다. 샘플값을 입력해봤습니다. 입력값 1에 3만원을, 입력값 2에 만원을 입력했더니, 현재 값이 2만원이 되어 있는 것을 확인하실 수 있습니다.


입력된 값은 활성화된 페이지에 아래와 같이 바로 반영이 됩니다.
기본적으로 출력되는 항목은 목표달성 그래프명, 그래프 설명, 현재 누적율, 누적 수치, 항목명 등입니다.



이번에 새롭게 추가된 목표달성 그래프는 모금 관련, 단계가 존재하는 프로젝트 사이트에서 현재의 상태를 사용자들에게 전달하는 데 유용하게 사용할 수 있을 것이라 생각합니다.


신고
Trackback 0 and Comment 0