PT_굿네이버스_제작_1310_sharing.pdf

굿네이버스
홈페이지
(PC/Mobile)
제작 제안

후원참여 중심
후원참여 극대화
사용자 편의+웹 접근성/표준
트렌드를 반영한 디자인
굿네이버스 만의 브랜딩
‘받은 미션’

플랫폼은 핵심 역할을
명확하게 정의해야

직관성, 명료성
그리고 편리성을
지닐 수 있습니다

사용자는 경험에 의한
그리고,

사용자는 경험에 의한
‘학습’이 쉬워야 합니다
그리고,

이러한 단순한 본질이 플랫폼의 성공을 가져다 줍니다

단순한 본질을 포함, 플랫폼의 KFS(KeyFactorforSuccess)를 정의하고
이를 기반으로 굿네이버스/유사 사이트를 분석해 보았습니다

플랫폼
성장
Website KFS - Evolution Flow – Closed Loop
Contents의
질/양
Killer App.
&
Wow Factor
Information
-Architecture
User
Interface
독특한 디자인 경험
(Web Identity)
고객이 느끼는
CS의 수준
업그레이드/
운영 효율성
회원 충성도
상승 요소
마케팅 활동과의
적합성
방
문
의
이
유
/목
적
U
s
e
r
E
x
p
e
r
i
e
n
c
e
*
(
사
용
자
경
험
)
운
영
/
정
책
/
모
니
터
링
/
피
드
백
회
원
유
치
/
후
원
모
금
확
대

0
1
2
3
4
5
Contents의 질/양
Killer App. & Wow Factor
Information Architecture
User Interface
마케팅 활동과의 접합성
회원 충성도 상승 요소
업그레이드 운영 효율성
고객이 느끼는 CS수준
컴패션
0
1
2
3
4
5
Contents의 질/양
User Interface
월드비전
0
1
2
3
4
5
Contents의 질/양
User Interface
기아대책
0
1
2
3
4
5
Contents의 질/양
User Interface
Save the Children
마케팅활동과의적합성

0
1
2
3
4
5
Contents의 질/양
User Interface
굿네이버스
굿네이버스의 경우
구조적 결함을
개선하는 것이
가장 시급한 문제

1 2 3
Information design Interaction design Interface design
‘전체적인 정보의 구조화’
• 목적,전략,목표사용자
• 분류(Classification)
• 그룹핑(Grouping)
• 네이밍(Naming)
‘상호작용의 방식 결정’
• 정보의 특성
• 사용자 정황(Context)
• 사용자 모델(Persona)
• 사용자 Task 모델
‘화면단위의 최종 구현 물’
• 목적
• 사용자
• Prototyping
• Look & Feel
“말하고자 하는 것의
정리”
“상대방 입장을 배려,
눈높이 대화”
“내 이미지와 개성을
고려한 대화”
User Experience Part (구조적 결함 부분 집중 분석)

홈페이지도착
녹색영역:첫방문시,방문자가인지하는자신의위치
주황색영역:최상단의‘후원Now’메뉴를클릭한후인지하는영역

혼돈스럽게만드는핵심:최상단네비게이션(Site의개념)의일관성없는역할
1. 최상단네비게이션을물리적으로철저하게독립시키거나
2. ‘후원Now’의서브콘텐츠를불러올경우새창을띄우거나
3. ‘후원Now’를네비게이션에위치시키지않고,
Util메뉴로전페이지에Default로위치시켜야했음.(현재구조상에서)
즉,최상단네비게이션과‘굿네이버스’의GNB(1st
Depth:대분류)와연동시키지말았어야함

이로 인해, Top Down 학습이 어려움

Web building frame
‘웹 사이트
미션/비전’
‘웹 사이트
Value Proposition’
‘설계/디자인 전략’
Architect
마케팅 고려 모바일
웹 접근성/
워드 프레스
IA UI
핵심 Task
(핵심 User Experience)
Bottom Up,
Top Down을 통한
콘텐츠 설계.
명시성, 직관성을
고려한 네이밍과
우선순위
Visual
Framework
(화면 분할의 운용)
감정이입을 위한
Visual
Storytelling PT
-굿네이버스
-후원하기
후원하기 Panel 내게 맞는
후원 찾기
(Wow
Factor)
콤포넌트
운영
랜딩 페이지
고려
PC 홈페이지의 사
용자 경험 + 모바
일 특성 고려
웹 접근성 가이드
라인 준수
웹 표준 코딩 진행
단순하지만편리한,있을것(콘텐츠/서비스)다있지만명료한,
사용자의목적을방해(헤매는-부정적사용자경험)하지않고후원의감성을증폭시켜줄수있는
그래서,더많은후원이일어날수있는굿네이버스웹사이트
후원 중심의 설계 + 감정이입을 위한 PT
+ 다양한 계층의 사용자를 위한 Universal Design + SHE (Shrink, Hide, Embody)
Functional :후원하기의편리함,후원을원하는사람을도울수있는
Emotional :후원의감정을불러일으킬수있는,후원후의기쁨을유지할수있는,관심을지속시킬수있는
Symbolic :후원과기부의대표성을띄는브랜드,굿네이버스

Architect_IA
Contents Scattering를
통해 콘텐츠 설계

Contents Scattering
Bottom-up Top-down
‘두 가지 접근 법을 통해
컨텐츠 그룹핑을 시도합니다.’
현재 컨텐츠를 중심으로 그룹핑 하는 개념 User Scenario를 고려한 그룹핑

Contents
Scattering
Bottom-up
GNI통합IA_V2.0을기반으로콘텐츠포지셔닝
Tone&Manner
User
Segment
감성적 이성적
방문자/잠재
후원자
기
후원자
각 메뉴별로
포지셔닝 해보고,
보다 강화 시켜
야 하는 부분 또
는 반드시 필요
한 부분을 체크
현재 컨텐츠를 중심으로 그룹핑 하는 개념

Tone&Manner
User
Segment
감성적 이성적
방문자/잠재
후원자
기
후원자
‘굿네이버스’ 메뉴
굿네이버스소식
굿네이버스소개
GNNow 사업소개
+굿네이버스스토리텔링
굿네이버스에대한대표적인
스토리텔링PT가필요

Tone&Manner
User
Segment
감성적 이성적
‘후원하기’ 메뉴
사업후원
해외아동결연
기업후원
캠페인후원 +후원하기
프로세스통합-Panel
방문자/잠재
후원자
기
후원자
+후원하기
스토리텔링
CGV의예매하기Panel과같이
통합된프로세스로구현
+내게맞는
후원찾기

Tone&Manner
User
Segment
감성적 이성적
‘회원마당’ 메뉴
후원자마당
회원활동스케치
회원나눔추천
나눔플러스
방문자/잠재
후원자
기
후원자
후원문의
마이페이지
일반회원에게도오픈된공간으로운영
‘소비’의사용자후기와같은역할을하는공간으로
후원참여에긍정적영향을줄것

Tone&Manner
User
Segment
감성적 이성적
‘나눔로그’ 메뉴
각지부및
사업홈페이지
방문자/잠재
후원자
기
후원자
63여개의국내지부,36여개의해외지부등
소수인원이운영하는홈페이지이므로
운영의편의성을추구해야함
단,가이드내에서의디자인다양성은기능적으로해결

Tone&Manner
User
Segment
감성적 이성적
방문자/잠재
후원자
기
후원자
종합
기업후원
캠페인후원 +후원하기
프로세스통합-Panel
+후원하기
스토리텔링
후원자마당
마이페이지
+굿네이버스스토리텔링
후원문의
굿네이버스소식
+내게맞는
후원찾기
해외아동결연
GNNow
굿네이버스소개
사업소개
회원나눔추천
나눔플러스

Contents
Scattering
Top-down
후원의‘세기’
후원의연속성
저 고
결연/
정기
일시/
중단
User Scenario를 고려한 그룹핑

후원의 ‘세기’
저 고
단순방문자 관심방문자 잠재후원자 목적방문자
굿네이버스스토리텔링
후원하기스토리텔링
그들을위한
우선순위
내게맞는후원찾기
.
.
.
후원자마당의콘텐츠
.
.
.
.
.
.
후원가이드
후원자마당의콘텐츠
.
.
.
짧은 시간에 위의 콘
텐츠가 그들에게 노
출 되어야 함.
그러므로, GNB하위
에 위치 시킬 것이
아니라 Visual 영역
을 이용하여
Showing해야 함.
‘기부가 처음이세
요?’ 콘텐츠를
리모델링.
신선한 사용자 경험
과 자신에게 맞는 후
원을 쉽게 접해볼 수
있도록 UI 설계
‘후원자 마당’ 콘텐
츠는 잠재 후원자에
게 ‘제품 사용 후기’
와 같은 역할을 할
것.
그러므로, 일반 회원
에게 해당 메뉴를 개
방해야 함.
‘후원하기’
메뉴/Panel에
‘후원가이드’ 콘텐츠
를 노출

후원의 연속성
결연/
정기
회원마당
그들을위한
우선순위
Remind정보/이벤트
.
.
.
후원자마당
.
.
.
회원 마당의
새로운 소식에 대해
가시성과 접근성을
높이기 위해
‘회원 마당’ 메뉴에
Badge 를 표시
관계를 위해 ‘이벤트,
기부 스토어’ 등을
활용 Fl-up 캠페인
일시/
중단
3

GNI통합IA_V2.0을기반으로한IA
굿네이버스 후원하기 회원마당 나눔 N-log
홈
굿네이버스 소개
사업소개
굿네이버스 소식
GN Now
홈
스마트 후원
해외아동결연
사업후원
캠페인후원
기업후원
홈
후원자마당
나눔플러스
회원나눔추천
후원문의
마이페이지
홈
국내지부
해외지부
사업별 N-log
프로젝트 N-log
캠페인 N-log

명시성과직관성을높인IA
후원하기 굿네이버스 소개 후원자마당 나눔현장
그리고 이야기
홈
*내게 맞는 후원 찾기
해외아동결연
사업후원
캠페인후원
기업후원
홈
굿네이버스 소개
사업소개
굿네이버스 소식
GN Now
홈
후원자마당
나눔플러스
회원나눔추천
후원문의
마이페이지
홈
국내지부
해외지부
*해외자원봉사단
사업별 N-log
프로젝트 N-log
캠페인 N-log
우선순위로‘후원하기’를
가장앞에둠.
본사이트의대표메뉴역할
‘소개’라는단어를붙여메뉴의
명시성을높임.
회원은[가입회원,후원회원]이라는
상위개념단어이므로,
‘후원자’라는단어로직관성을높임.
나눔N-log의경우,공급자중심의
언어.다양한계층을고려할때,
쉬운언어여야하며,
클릭하고싶은흥미가생겨야함.

Architect_UI
Visual Framework
(화면 분할의 운용)

Visual Framework (화면 분할의 운용)
① 사이트의핵심Zone의적용
② 우선순위
③ 위의우선순위를기준으로A영역을사이트메인의핵
심Zone으로설계함
A : 핵심 Zone B C
기업Push 고객Pull 기능,메뉴 기타
컨텐츠
기능성
A:핵심Zone
B B
C
탐색형(특정컨텐츠를찾는유형),
서핑형User에게기대하는영역
목적지향형과일반User에게기대하는영역
재방문/사이트학습빈도가높아진사용자
A:핵심Zone B
C

현재 굿네이버스 웹사이트는
두 가지 경우의 수로 해석할 수 있다.
1. A, B 두 개 Zone 운용
2. A, B, C 세 개 Zone 운용
1번의 경우로 보기에는 A, B Zone 내에
분할 된 시각단위의 개수가 너무 많아
정보인지에 어려움이 있으며
(A=6개, B=8개)
2번의 경우로 보기에는 시각적 무게중심
이 없어 서핑의 편안함/여유가 없는 문제
점이 있음
명확한 Zone 처리
시각적 무게중심
적당한 시각단위 수

핵심 Task
감정이입을 위한
Visual Storytelling PT

웹 사이트 방문시
‘후원하기’
Visual Storytelling
해외아동결연, 사업후원,
캠페인 후원, 기업후원의
실제 이야기를 [동영상, 또는
고해상도 이미지]로 PT
책 넘기기 효과
아래에 보이는
GNB클릭시
자동 Up 스크롤
(HTML5)

GNB클릭시
자동 Up 스크롤
(HTML5)

굿네이버스 소개 클릭시
‘굿네이버스’
Visual Storytelling
Fact를 기반으로 한
감성 T&M Visual Storytelling
[동영상 또는 고해상도 이미지]
(HTML5)

핵심 Task
후원하기
Panel

일시후원
일시후원-식료품
비지정결연후원
지정결연후원
사업후원(전체)
결연후원,사업후원동시(비지정형)
캠페인을통한일부선택된혼합형(∞)
사업후원한개만...
다양한 후원사업
그러나, 절차의 복잡함으로 인해
자칫 산재된 후원사업으로
느껴질 수 있습니다

Object 중심의 Process (Bottom-up Process)
현재, 굿네이버스 후원하기 프로세스는
즉, ‘주문형 프로세스’ 입니다
(보기-선택-주문-개인정보-결제의직렬처리:재주문시처음부터다시진행)
커피주문, 또는 쇼핑몰 주문과 같은 형태로
단순 주문처리에 적합한 구조입니다.

일시후원
일시후원-식료품
비지정결연후원
지정결연후원
사업후원(전체)
결연후원,사업후원동시(비지정형)
캠페인을통한일부선택된혼합형(∞)
사업후원한개만...
전체,어떤지원들이있는걸까?
지금이후원이나에게적합
한것일까?
다른후원을알고싶으면사이트를
다시서핑해야하는데...
한눈에볼수있는방법은없나?

전체,어떤지원들이있는걸까?
지금이후원이나에게적합
한것일까?
다른후원을알고싶으면사이트를
다시서핑해야하는데...
한눈에볼수있는방법은없나?
후원의 구조적 절차에
심리적 편안함을 더할 뿐 아니라
프로세스를 병렬 처리하여
‘선택’을 바꾸더라도 ‘주문/개인정보 입력’을
재 진행 하지 않도록 설계
사용자 편의성 증대

언제나 접속 가능
모든 후원을 통합하여
한 눈에 Scan 가능

핵심 Task
내게 맞는 후원 찾기
(Wow Factor)

자신의 캐릭터를
원하는 테이블 내용에
마우스로 Drag & Drop

[캐릭터 X 상황]
초기 기획완료

어떤 아이들이 가장 많이 걱
정되시나요?
기업
남 여
10대 20대 30대 40대 이상 10대 20대 30대 40대 이상
상처받은 우리나라
아이들
기업이 보유하고 있는
포인트, 적립금으로
아이들을 후원해주세요
왕따 때문에
고민하고 있는 내 친구
이제 내 친구는 내가 지킨다
학교폭력이 점점
심해지고 있습니다
어른이 된 당신이
함께 지켜주세요
빈곤과 학대로 하루하루를
사는 것도 힘겨운 우리
아이들을 지켜 주세요
사회에서 소외된 우리
아이들, 배부르고
따뜻한 가정이 필요합니다 배고픔
과 외로움에 지친
아이들을 도와주세요
학교 오는게 싫다던 내 친구 이제
내 친구는 내가 지킨다
학교폭력에 시달려
용기잃은 우리 아이들에게 당
신의 따뜻한 손길이
필요합니다
학교폭력으로 아픈아이가
없도록, 어른들이 함께
지켜주세요
배고픔과 외로움에
방치되어 있는 우리
아이들이 건강하게
자랄 수 있도록 도와주세요
포인트 기부 캠페인 학교폭력예방 캠페인 학교폭력예방캠페인 국내아동권리보호사업 국내아동권리보호사업 학교폭력예방 캠페인 학교폭력예방 캠페인 학교폭력예방 캠페인 국내아동권리보호사업
어려움을 겪고 있는
북한 아이들
가깝지만 멀리있는 북한에
기업의 상품으로
도움을주세요
배고픔에 지치고 아픈
북한의 친구들을
도와주세요
북한의 아이들이 건강하고
예쁘게 자라날 수 있도록
도움의 손길을
내밀어 주세요
가난으로 꿈을 잃어가는
북한 아이들.
우리 아이들처럼
꿈을 잃지 않도록
미래가 필요합니다
북한의 아이들이
우리 아이들 처럼
행복하고 건강하게
자라날 수 있도록
도와주세요
배고픔에 지치고 아픈
북한의 친구들을
도와주세요
북한의 아이들이 건강하고
예쁘게 자라날 수 있도록
도움의 손길을
내밀어 주세요
가난으로 꿈을 잃어가는
북한 아이들에게
미래를 밝혀 주세요
북한의 아이들이
행복하고 건강하게
자라날 수 있도록
도와주세요
물품후원 대북지원사업 대북지원사업 대북지원사업 대북지원사업 대북지원사업 대북지원사업 대북지원사업 대북지원사업
지구반대편의
아이들
지구 반대편에 있는
아이들에게도 꿈과 희망을 선물
해주세요
지구 반대편에 있는 친구
에게 작은 선물을 해주세요
가난과 질병으로 고통받는 지
구 반대편의 아이들은 몸도
마음도 건강한
당신을 기다리고 있습니다.
현장에서 직접
당신의 마음을 보여주세요!
우리 나라 아이들처럼
평범하게 공부하는 것이 소망
인 지구 반대편 아이의 꿈을
이루어 주세요
아픈 부모님 때문에
가족의 생계를 책임지고
있는 아이들이
희망을 주세요
지구 반대편에 있는 친구
에게 작은 선물을 해주세요
매일 고되고 힘든 일으로
웃음을 잃어가는
아이들에게
예쁜 미소를 되찾아 주세요
결혼, 생일, 출산 내 생애
최고의 날을 지구 반대편
아이들과 함께 기념하세요
아직 엄마의 보살핌이
필요한 어린 아이들이
한 가정을 책임지고
있습니다 당신의 도움으로 아
이들의 꿈을
되찾아 주세요
아동결연 행복한 선물가게 해외자원봉사 해외아동 1:1결연 해외아동 1:1결연 행복한 선물가게 해외아동 1:1결연 내 생애 최고의 날 해외아동 1:1결연
갑작스런 재난을
당한 아이들
갑작스러운 재난을 당한
이웃에게 기업의 상품으로
도움을 주세요
영화에서 보던 지진,
전쟁의 고통때문에
힘들어 하는 친구들이
다시 웃을 수 있도록
도와주세요
지진,해일,홍수,전쟁의
고통으로 더 이상 일어날
힘도 없는 아이들의
힘이 되어 주세요
갑자기 갈 곳을 잃은
아이들에게 안전한 환경을
만들어 주세요
아직 보살핌이 필요한
어린 나이에 자연재해, 전쟁으로
부모를 잃은 아이들을
보호해 주세요
재난과 전쟁으로
갈 곳을 잃은 지구 반대편의
친구들이 매일 울고 있어요,
친구들이 다시
웃을 수 있도록 도와주세요
갑자기 닥친 재난으로
매일 눈물 흘리는
아이들의 예쁜 미소를
되찾아 주세요
자연재해와 전쟁으로
갈 곳을 잃은 안타까운
아이들이 있습니다
아이들이 안전한 환경으로 돌
아갈 수 있도록
도와주세요
가족을 잃은 아이들이
안전한 환경에서
성장할 수 있도록
도와주세요
물품후원 재난구호지원사업 재난구호지원사업 모두의마을 재난구호지원사업 재난구호지원사업 재난구호지원사업 재난구호지원사업 재난구호지원사업
배움의 꿈을 실현하지
못하는 아이들
임직원의 지식나눔 재능기부
아이들에게 배움의
기쁨을 알려주세요
지구 반대편 친구도
나와 함께 꿈을 꿀 수 있게
도와주세요
누구에게는 가기 싫었던
학교 였지만, 누구에게는
갈 수 없는 곳이
되지 않게 해주세요
멘토가 되어줄수는
없지만, 꿈을 꿀 수 있게
도와줄수는 있습니다
부모의 죽음, 가난 때문에 학교에
갈 수 없는
아이들에게 희망을 주세요
나와 같은 꿈을 꾸고 있는 지구 반
대편 친구를
도와주세요
배고픔과 가난 때문에
마음껏 꿈꿀 수 없는
아이들에게 희망을
선물해주세요
아이들이 밝고 희망찬
미래를 향해 걸어나갈 수 있도
록 지원해 주세요
우리가 가난을 벗어날
유일한 희망은 교육이었던 것
처럼, 아프리카 아이들
에게도 희망을 주세요
임직원봉사 행복한 선물가게 해외아동 1:1 결연 희망학교 지원사업 희망학교 지원사업 해외아동 1:1 결연 해외아동 1:1 결연 해외아동 1:1결연 희망학교 지원사업
건강이 안좋은
아이들
기업의 상품을 나눔과
연계하여 아픈 아이들에게
건강한 미소를 되찾아주세요
다른 나라의 친구들이
더 이상 아프지 않고
웃을 수 있게 도와주세요
매일 세시간을 걸어
물을 뜨러가는 아이들에게
깨끗한 물을 마음껏
마실 수 있게 해주세요
질병에 아파하는 아이들이
치료를 받을 수 있도록
도와주세요
질병에 신음하는
아이들을 위해 치료의
기회를 안겨주세요
다른 나라의 친구들이
더 이상 아프지 않고
웃을 수 있게 도와주세요
더럽고 비위생적인
물조차도 마음껏
마실 수 없는 아이들이
깨끗한 물을 마실 수 있게
도와주세요
좋은 음식, 깨끗한 음식으로
아픈 아이들에게 힘과
미래를 불어넣어 주세요
아픈 아이를 위해
해줄 수 있는게 없어
속상하기만한 아프리카
부모의 마음을
헤아려 주세요
공익연계마케팅 100원의기적 식수위생사업지원 의료기기 지원사업 병원설립 지원사업 100원의기적 식수위생사업지원 식품위생사업지원 해외구호개발사업
굶주리고 있는
아이들
다양한 미디어 매체를 통해
전세계 빈곤 아동들의
삶과 희망을 퍼뜨려주세요
100원은 배고픈 친구에게
바나나를 선물해줄 수 있습니다
지금 이 시간에도
배를 주리고 있을
아이들에게 식품을
지원할 수 있도록
손을 내밀어 보아요
배고픔을 이기지 못해
쓰러져 가는 아이들에게
구원의 손길을
내밀어 주세요
아이들이 기본적인 생존권을 보장
받을 수 있도록
힘이 되어주세요
100원은 배고픈 친구에게
바나나를 선물해줄 수 있습니다
아이들이 배를
굶주리지 않게
희망으로 따스하게
안아주세요
가족의 생계를 위해
끼니도 거르며 일하는
아이들이 맛있는 밥을
먹을 수 있도록 도와주세요
엄마가 해주신 맛있는
반찬과 따뜻한 밥이 그리운 아
이들이 맛있는 밥을
배불리 먹을 수 있도록
도와주세요
미디어 사회공헌 100원의기적 식품식량지원 아동권리보호사업 아동권리보호사업 100원의기적 날아라 희망아 날아라 희망아 국내아동권리보호사업
생계를 위해 노동의
현장에 내몰린 아이들
노동의 현장에 내몰린
아이들의 삶을 다양한
미디어 매체를 통해
알려주세요
돈을 벌어야만 학교에
갈 수 있는 친구에게
도움을 주세요
20살에 아르바이트로
처음 일을 시작하지만,
10살도 안된 나이에
일을 하고 있는 아이들이
있습니다 아이들에게
도움을 주세요
어린 동생들을 위해
오늘도 고된 노동으로
힘겨운 하루를 보내는
그들의 희망이 되어주세요
가난으로 꿈이 꺾여버린
아이에게 꿈을
다시 찾아주세요
나와 같은 꿈을 꾸고 있지만
학교대신 돈을 벌러나가는
친구를 도와주세요
갖고 싶은게 있어
아르바이트 하는게 아니라, 생
계를 위해 일을 하고
있는 아이들이 있습니다
아이들에게 도움을 주세요
아픈 엄마와 두 동생을
지키는 가장이 되어,
오늘도 고된 노동으로
힘겨운 하루를
보내고 있습니다
그들의 희망이 되어주세요
가난으로 꿈이 꺾여버린
아이에게 꿈을 다시
찾아주세요
미디어 사회공헌 해외아동 1:1결연 해외아동 1:1결연 나눔0700 해외아동 1:1결연 날아라 희망아 날아라 희망아 나눔0700 해외아동 1:1결연
늘 혼자 있어
외로운 아이들
혼자 있는 아이들에게
희망을 선물하세요
방학을 싫어하는 친구가
있습니다 그 친구의 방학이
행복할 수 있도록 도와주세요
아이들에게 외로움은
내가 애인, 친구가
없는것 보다 더 힘듭니다
아이들에게
따뜻함을 선물해 주세요
엄마도 없는 집에서
아빠만 애타게 기다리는 아이
들이 있습니다
아이들의
외로움을 달래주세요
100원이 모여 기적을
만드는 것처럼
당신의 관심이
아이들을 외롭지 않게
만들 수 있습니다
방학을 싫어하는 친구가
있습니다 그 친구의 방학이
행복할 수 있도록 도와주세요
아이들에게 외로움은
내가 애인, 친구가
없는것 보다 더 힘듭니다
아이들에게
따뜻함을 선물해 주세요
일하러 간 엄마가 오기만
애타게 기다리는 아이들이
있습니다 아이들의 외로움을
달래주세요
100원이 모여 기적을
만드는 것처럼
당신의 관심이 아이들을
외롭지 않게
만들 수 있습니다
나눔이벤트 날아라 희망아 국내아동권리보호사업 날아라 희망아 100원의기적 날아라 희망아 국내아동권리보호사업 국내아동권리보호사업 100원의기적
매일 울고 있는
아이들
어른들의 무관심 때문에
상처 받은 아이들에게
나눔 이벤트를 진행해주세요
위험한 어른 때문에
더 이상 친구들이
울지 않도록 해주세요
작은 선물로 아이들이
잠깐이라도 웃을 수 있게
해주세요
대한민국 '딸바보'
아빠들이 우리 아이들을
위협하는 검은 손으로 부터
아이들을 지켜주세요
우는것밖에 할 수 없는
힘없는 아이들이
당신의 도움을
필요로 하고있습니다
위험한 어른 때문에
더 이상 친구들이
울지 않도록 해주세요
당신의 특별한 날을
기념해보세요
울기만 했던 아이들이
이날에는 당신때문에
웃을 수 있는 특별한 날이
되었습니다
아이들 학교 보내기가
무서워지지 않도록,
우리 아이가 안전한
사회 만들기에 함께
동참 해주세요
어른들처럼 마음 속 아픈
상처를 그대로 방치하고
있는 아이들을 도와주세요
나눔 이벤트 성학대예방 후원캠페인 행복한 선물가게 성학대예방 후원캠페인 아이들의 마음이 울고있어요 성학대예방 후원캠페인 내 생에 최고의 날 성학대예방 후원캠페인
아이들의 마음이
울고있어요

마케팅 고려
콤포넌트 운영

Main/Sub Main의
Body 콘텐츠를
콤포넌트로 설계하여,
순서바꿈/추가/삭제를
운영자가 손쉽게 컨트롤
할 수 있도록 기능화

마케팅 고려
랜딩 페이지 고려

현재 구글 광고에서 랜딩되는
페이지. 상단 GNB영역이 없어
다른 메뉴로의 항해를 어렵게
하고 있음
1. 상단의GNB영역을랜딩즉시
위로스크롤시켜캠페인의
비쥬얼만드러나게함.
슬라이드모션을통해사용자는
상단의GNB를인식하게됨.
2. 다른캠페인도쉽게접근할수
있도록캠페인네비게이션을
보다가시적으로디자인

모바일
PC 홈페이지의 사용자 경험
+ 모바일 특성 고려

웹 접근성·표준
웹 접근성 가이드라인 준수
웹 표준 코딩 진행

번호 체크리스트 세부설명
1 대체 텍스트 제공 텍스트 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다
2 자막 제공 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 한다
3 색에 무관한 콘텐츠 인식 콘텐츠는 색에 관계없이 인식될 수 있어야 한다
4 명확한 지시사항 제공 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다
5 텍스트 콘텐츠의 명도 대비 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5대 1 이상이어야 한다
6 배경음 사용 금지 자동으로 재생되는 배경음을 사용하지 않아야 한다
7 키보드 사용 보장 모든 기능은 키보드만으로도 사용 할 수 있어야 한다
8 초점 이동 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다
9 응답시간 조절 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다
10 정지 기능 제공 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다
11 깜빡임과 번쩍임 사용제한 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다
12 반복 영역 건너뛰기 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다
13 제목 제공 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다
14 적절한 링크 텍스트 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다
15 기본 언어 표시 주로 사용하는 언어를 명시해야 한다
16 사용자 요구에 따른 실행 자동으로 재생되는 배경음을 사용하지 않아야 한다
17 콘텐츠의 선형화 콘텐츠는 논리적인 순서로 제공해야 한다
18 표의 구성 표는 이해하기 쉽게 구성해야 한다
19 레이블 제공 입력 서식에는 대응하는 레이블을 제공해야 한다
20 오류 정정 입력 오류를 정정할 수 있는 방법을 제공해야 한다
21 마크업 오류 방지 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다
22 웹 애플리케이션 접근성 준수 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다
웹 접근성 체크 리스트
‘장애인 및 다양한 디바이스를 고려한 웹 접근성 가이드라인을 준수합니다.’

웹 접근성 가이드라인에 입각한
신규구축
웹 접근성 자가진단 실시
4가지 필수 항목 95% 만족도 달성
ü 대체텍스트제공
ü 제목제공
ü 페이지언어제공
ü 서식레이블제공
웹 접근성 가이드라인에 의한 자가진단 실시

번호 체크리스트 기준
1 (필수) HTML validator 통과했는가? HTML validator 검사기
2 (필수) CSS validator 통과했는가? W3C CSS Validator 검사기
3 (필수) Cross Browsing 되는가?
PC(Window)
IE8
IE9
IE7
FF/Chrome/ Safari/Opera(최신)
PC(Mac) FF/Chrome/ Safari/Opera(최신)
Mobile
Android 4.0 (주0S)
iOS 6.1
4 Doc type을 선언하였는가? W3C 기술문서
5 레이아웃 가이드를 따르고 있는가? W3C 기술문서
6 heading룰이 지켜졌는가? (권장사항) W3C 기술문서
7 Link 가이드룰이 지켜졌는가? W3C 기술문서
8 image 가이드룰이 지켜졌는가? W3C 기술문서
9 image가 가이드맞게 Sprite 되었는가? W3C 기술문서
10 image의 src경로가 로컬이 아닌 서버경로로 바꿨는가? W3C 기술문서
11 링크영역이 올바른지 체크해보았는가? W3C 기술문서
12 CSS 가이드룰이 지켜졌는가? W3C 기술문서
웹 표준 HTML & CSS 코딩 체크 리스트
‘아래의 웹 표준 Guide라인에 입각한 웹 표준 코딩을 실시합니다.’

워드 프레스
‘나눔현장 그리고 이야기’
워드 프레스 적용

‘나눔현장 그리고 이야기’에
워드프레스 적용 이유
- 콘텐츠 제작의 제약이 없고,
- 관리 / 추가 생성·삭제 용이
- Meta 블로그 형식으로
각 지부 및 캠페인의
콘텐츠를 모아 볼 수 있음

디자인 시안
설계/디자인전략을적용한
후원 중심의 설계
+ 감정이입을 위한 PT
+ 다양한 계층의 사용자를 위한
Universal Design
+ SHE (Shrink,Hide,Embody)
※1. 첨부의JPG파일을참조해주시기바랍니다
※2. 모션효과는PT때시연할예정입니다

PT_굿네이버스_제작_1310_sharing.pdf

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to PT_굿네이버스_제작_1310_sharing.pdf

Similar to PT_굿네이버스_제작_1310_sharing.pdf (20)

PT_굿네이버스_제작_1310_sharing.pdf