프로젝트 기록2023. 5. 2.

나이키 '액티브 모두' 웹사이트 제작기

'액티브 모두(Active Modoo)'는 나이키가 후원하고 초록우산 어린이재단이 주관하는 아동 신체 활동 지원 프로그램입니다. 

 

 

"글로벌 연구에 따르면, 활동적인 아이들이 더 건강하고 행복하며 성공적인 학교 생활과 일상을 누린다고 합니다. 특히 8~13세 어릴 적 긍정적인 스포츠 경험은 평생으로 이어지는 건강한 습관을 만들어 준다고 합니다. 하지만 전 세계적으로 건강하게 성장하기 위해 필요한 신체 활동을 하는 아이들은 5분의 1에 불과하며, 특히 한국 아이들은 전 세계적에서 신체 활동이 가장 부족하다고 합니다. 그 중에서도 여자아이들이나 소외 계층의 아이들은 꾸준히 신체적 활동을 하는데 상대적으로 더 많은 어려움을 겪습니다."

"이에 나이키가 후원하고 초록우산 어린이재단이 주관하여 위밋업 스포츠와의 파트너십을 통해 ‘Active Modoo(액티브 모두)’란 아동 신체 활동 지원 프로그램을 2022년5월 5일에 런칭하였습니다. 프로그램명에 포함된 '모두(Modoo)'는 아이들 뿐만 아니라 아이들에게 긍정적인 스포츠의 경험을 줄 수 있는 어른들 모두를 포함하며, 모두 함께 건강한 삶을 만들고자 하는 프로그램 의의가 담겨 있습니다."

 

이번 프로젝트에서 바톤은 현장에서 스포츠 교육을 담당하는 코치님들이 사용하실 교본(실물)과 액티브모두 공식 홈페이지 제작을 맡았습니다.

 

사이트 보기

https://activemodoo.com/

 

 

 

1. 'Made to Play', 'Jump Jam', 그리고 'Active Modoo'

'액티브 모두'는 미국의 나이키가 전개하는 'Made to Play' 캠페인의 한국 버전 프로젝트입니다. 일본에서도 이미 같은 컨셉의 버전의 프로젝트가 운영되고 있는데, 일본의 프로젝트 이름은 'Jump Jam'입니다. 

 

참 미국스럽고
참 일본스럽다

 

1)글로벌 캠페인의 일환이니 해외의 캠페인 사이트들이 각각 어떤 인상을 가지고 있는지 당연히 참고를 해야 하고(너무 동떨어져보이거나 혹은 너무 비슷한 인상을 주지 않도록), 2)주된 테마는 어린이이니 이 사이트에 어린이 대상 프로젝트를 담은 곳이라는 인상이 전해져야 하는데, 3)사이트를 이용하는 사람들은 대부분 성인(코치, 부모, 교사)이니 너무 유치해보이면 또 안 되는 등의 여러 상황을 고려하여 선을 잘 맞춰야 하는 프로젝트였습니다. 

 

 

 

 

2. 통합 프로젝트의 프로세스 운영

비주얼 브랜딩과 웹사이트 구축을 동시에 의뢰받아 진행하는 작업은 내부적으로는 '통합 프로젝트'라고 부르고 있습니다. 이 경우 웹사이트 디자인은 비주얼 브랜딩의 일종의 베리에이션 결과물로 보고, 순서상 비주얼 브랜딩을 먼저 진행한 후 최소한의 방향성이 결정된 후 웹디자인 단계가 시작되도록 프로세스를 설계합니다.

 

'디자인 방향성 결정' 시점보다 'UI 디자인' 시작 시점이 나중에 위치하도록 하기.

 

바톤에서 비주얼 브랜딩은 브랜드팀이, 웹디자인은 UI디자인팀이 각각 담당하고 있으니 1)프로젝트의 최종 데드라인을 맞추고, 2)두 팀의 개별 일정에 문제가 없게 하면서, 3)동시에 위의 두 시점을 딱 맞게 해주어야 하기 때문에 기획 차원에서 꽤 운영 난이도가 있는 작업입니다. 

 

 

코치용 교본

 

웹사이트 디자인

 

이번 비주얼 브랜딩 작업에서는 코치와 어린이의 일러스트레이션과 키컬러(블루 & 오렌지)를 주된 디자인 요소로 개발하였으며, 이 요소들이 웹사이트 환경에 맞게 변형하여 적용했습니다. 

 

웹사이트에 어느 정도 동적인 효과를 줄 것인지에 대한 논의도 이루어졌는데(프로그램 타이틀에 '액티브'가 들어가기도 하고..) 일러스트를 중심으로 한 디자인 인상은 즐겁고 활동적인 쪽으로 설정하는 것이 맞지만, 유저의 주된 방문 목적이 사이트 내의 정보 탐색임을 고려하여 동적인 효과는 최소한의 범위 안에서 정제하여 주는 쪽으로 결정하였습니다.

 

작업 당시의 사이트 내 모션 관련 논의

 

 

 

3. 모두에게 열려있(어 보이)는, 근데 리스크는 없는 사이트 만들기 😇

어떤 사이트에 들어갔을 때 화면 우상단에 '로그인' 버튼이 떡하니 있으면 사람들은 무의식적으로 '이 사이트에서 뭔가 입력을 하려면 로그인을 해야 하나보다' 하는 생각을 합니다. 실제로도 '로그인'으로 대변되는 회원 시스템은 당신이 우리 멤버가 되지 않으면 어떤 기능은 사용할 수 없고 어떤 콘텐츠는 볼 수 없다는 메시지이니, 로그인 버튼의 유무(= 회원 시스템의 유무) 또한 웹사이트의 인상에 영향을 미치는 요소라고 볼 수 있습니다. 오프라인으로 치면 이 공간이 열린 공원이냐, 아니면 열쇠가 필요한 집이냐의 인상과도 비슷할 것 같습니다. 

 

이와 관련하여 액티브 모두의 사이트는 여러 논의 끝에 회원 시스템이 없는 방식으로 구현하는 것으로 결정되었습니다. 위에서 언급한 사이트 인상 면에서도 없는 것이 좋겠다는 판단이었고, 회원 정보를 보관하고 관리하는 부담이 없다는 것도 여러 이유 중 하나였습니다. 한편 이 방식은 스팸 공격에 매우 취약하고, 익명의 유저가 악성 콘텐츠를 입력하는 것을 막기 어렵다는 단점이 있습니다. 이에 대해 결과적으로 도입한 것은 휴대폰 인증(점유인증)입니다. 꽤 번거로운 것이 사실이지만 위의 단점들을 커버할 수 있고, 또한 액티브모두가 비교적 관여도가 높은 유저들이 주로 이용하는 사이트이기 때문에 가능한 방식입니다. 

 

휴대폰 인증 화면

 

 

또한 이 방식 구현시 쟁점 중 하나는 특정 유저가 후기 작성, 질문 작성, 프로그램 신청 등의 행위를 할 때마다 인증을 해야 하는지에 대한 것이었는데, 이에 대해서는 브라우저가 열려 있는 동안 휴대폰 인증이 15분간 계속 유지될 수 있도록 하고, 시간이 더 필요한 경우 인증 유효 시간을 연장할 수 있도록 하는 기능을 개발하여 적용하였습니다. 인증이 유지되는 동안에는 추가로 인증을 받을 필요 없이 마치 로그인이 된 상태와 동일하게 사이트 내 주요 입력 기능들을 이용할 수 있습니다.

 

 

인증이 완료된 직후의 화면. 남은 시간을 보여줌과 동시에 해제와 시간 연장도 선택할 수 있다.

 

 

다소 기술 난이도가 있다는 게 단점이지만, 1)회원시스템을 유지하는 것은 부담스럽고 + 2)유저의 관여도가 비교적 높으며 + 3)유저의 입력 기능이 탑재되어야만 하는 사이트의 경우 이러한 인증 방식이 대안이 될 수 있지 않을까 합니다.

 

 

 

 

4. 만 14세 미만 아동의 개인정보 처리 및 아동 초상권 관리

액티브 모두는 어린이 대상 프로그램이며 현장에서 촬영된 사진과 영상이 홍보물에 사용된다는 점이 특징이며, 이러한 부분들이 이용약관에 적용되었습니다. 주요 내용은 다음과 같습니다. 

 

제3조 (처리하는 개인정보의 항목) 

재단은 제1조의 처리 목적을 위하여 개인정보를 아래와 같이 처리하고 있습니다.

<프로그램/홈페이지 운영> 수집항목 
⦁ 이름, 이메일, 휴대전화번호, 학교, 학년, 성별, 신발·상의·하의 사이즈, 참여 프로그램 정보, 신청동기 
⦁ 만14세 미만 아동의 법정대리인 이름, 생년월일, 성별, 휴대전화번호, 아동과의 관계 

<아동의 초상 이용 프로그램 홍보> 수집항목 
⦁이름, 연령, 학년, 주소, 휴대전화번호, 초상 등 개인식별정보가 포함된 사진·동영상 
⦁만14세 미만 아동의 법정대리인 이름, 생년월일, 성별, 휴대전화번호, 아동과의 관계 

 

제4조 (만 14세 미만 아동의 개인정보 처리)

만 14세 미만 아동이 프로그램에 참여하여 재단이 해당 아동의 개인정보를 처리하게 되는 경우에는 법정대리인의 동의를 얻어 프로그램 수행에 필요한 최소한의 개인정보를 수집합니다.

 필수적 정보 : 법정대리인의 성명, 관계, 연락처
 재단은 상기 제1조의 개인정보의 처리 목적 관련 홍보·마케팅을 위해 아동 또는 법정대리인의 개인정보를 수집할 경우에는 해당 정보주체로부터 별도의 동의를 얻습니다.

 

한편, 기존에는 프로그램 당일에 현장에서 초상권을 포함한 개인정보 활용 동의를 종이로 받았었는데, 새로 개발된 시스템에서는 프로그램 신청 단계에 이 동의 체크 단계를 포함하여 운영하시는 분들의 일손을 덜고 더 쾌적하게 프로그램이 운영될 수 있도록 했습니다. 

 

 

액티브 모두가 개발한 전래놀이형 게임 '문어놀이'를 공유하며 리뷰를 마칩니다. 요즘 날씨도 좋으니 직장동료들과 점심 식사 후에 한 번 해보시길 권합니다. 

 

 

 

-

TEAM

Client. 나이키코리아, 초록우산어린이재단

Program Partner. 위밋업스포츠
Illustration Partner. 5unday

 

교본 디자인

Art Direction & Design. 이아리

Design. 이지혜, 한승희 

Illustration: 이지혜, 이아리

Photography. 이지혜, 한승희, 이아리 

Planning. 이지혜, 김한성

 

웹사이트 제작

Design. 이해인, 고유영, 전에녹, 오유진

Development. 김동하, 이상희, 추지혜, 한송욱

Planning. 황이현, 권도영, 김지빈, 김한성