쿠키 눈 코 입 어디에?

[실무 기획]디테일의 확충 : 이 기획은 어떻게 현실화 되는가?

커리큘럼 코드명 : PXE-103

쿠키런 : 오븐브레이크의 UX/UI 개선, 콘텐츠 개선 및 콘텐츠 기획을 진행하고 있는 IT팀 박도혜입니다.

 

지금까지의 기획안입니다.

1. 유닛 1 : 니즈의 파악 (1)

https://phalanx-club.tistory.com/645

돌아오라 쿠키들이여

 

2. 유닛 1 : 니즈의 파악 (2)

https://phalanx-club.tistory.com/722

쿠키들아 여기 맛난 젤리 있어!

 

3. 유닛2 : 내용의 구조화

https://phalanx-club.tistory.com/770

너의 목소리를 들어줄게, 용감한 쿠키!

 

4.  유닛3 : 디테일 확충 (1)

https://phalanx-club.tistory.com/846

쿠키 반죽 모아모아 같이 탈출하자!

 

5.  지난주 유닛3 : 디테일 확충 (2)

https://phalanx-club.tistory.com/938

나랑 같이 하자고! 뭐? ALL THE NEW쿠키런!!

 

 

저번 기획에서는 우선되는 파트의 세부 디테일의 확충을 진행하였습니다.

지난번의 기획의 피드백에 따라서 소비자의 유입에 따른 쿠키런 : 오븐브레이크의 유입 flow 를 고려하여 기획 순서를 다시 설정하였습니다.

 

• 신규유저 유입의 경우 신규유저 리텐션(신규유저의 재방문)을 높이기 위해서는 UI/UX 문제의 개선이 필수적이므로 이를 가장 첫번째의 순서로 설정하였습니다.
• 쿠킹덤 및 쿠모탑의 콜라보 콘텐츠의 경우 쿠모탑의 자체 안정화 시기 또한 필요하다는 피드백을 바탕으로 가장 마지막 순서로 설정하였습니다.
• 신규유저보다는 쿠키런에 관심이 많은 유저들을 대상으로 한 콘텐츠들이라는 피드백을 바탕으로 저번 기획에서 다루지 못한 캐주얼 게임의 게임성을 극대화 한 장애물런과 아이템런을 이번 기획에서 추가적으로 다루어 보려고 합니다.

따라서 제안하는 기획의 flow는 아래와 같습니다.

 

기획의 순서

 

이번기획 및 다음기획에서는 이 flow 에 맞추어 각 기획의 세부적인 디테일을 좀 더 추가하여 기획의 내용을 구체화 하고 각 기획의 명확한 포지셔닝을 제시하며 따라서 전체 내용을 다시금 되돌아보며, 기획을 📜최종적으로 재정의하고, 확정, 결론 짓는 과정📜을 진행할 것입니다. 

 

이번주는 UI의 세부적인 측면과 이를 실제 이미지화 하는 기획을 하였습니다.

 

 

---

 STEP 01    DETAIL _ UI / UX

1)    KEY INTERFACE 창 (연습장 기능과 연계)

: 기종의 다양성 증가와 사람손의 차이로 인한 문제점을 극복하기 위한 사용자 맞춤 키 위치 설정창의 제공

 

기대효과 : 이로 인해 미래에도 계속해서 출시될 다양한 핸드폰 및 디바이스들의 크기와 사용방식에 관계없이 사용자의 편의에 맞추어 자신이 원하는 부분에 jump / slide 키를 배치할 수 있음에 따라 캐주얼 게임의 편의성 증대 및 각 기종에 맞는 키 제공의 부담 감소

 

예상 이미지 :

Key Interface 예시

 

• 조절할 수 있는 키 주변을 금색의 테를 두르고 움직이고 있는 키의 주변 테에 삼각형의 표식을 하여 움직이는 듯한 느낌을 줍니다.
• 화면 중간의 하단부에 플레이 스탑 버튼을 추가하여 쿠키를 점프하고 슬라이드 해보면서 자신의 손에 맞는 위치로 조정할 수 있도록 합니다.
• 하단부 맨 오른쪽의 잠금 버튼을 해제하면 Key interface 창이, 아닌 경우 금색 테가 사라지고 연습장 기능만을 이용할 수 있도록 합니다.

+ 현재 플레이하고 있는 화면에는 표시되지 않지만 KEY Interface 창에 들어오기 전 원하는 쿠키를 선택할 수 있도록 하여 그 쿠키 및 펫 세트를 플레이할 수 있도록 합니다.

-> 이는 그 쿠키를 플레이할 수 있는 연습장 기능도 제공함으로써 그 쿠키를 플레이해보지 못한 유저들이 그 쿠키 및 펫의 능력을 이해할 수 있도록 합니다.

 

+ 연습장기능과 함께 활용하기 위하여 하단부의 잠금 기능을 추가하였습니다. (개발 비용 축소)

 

 

2)    UI 실험실

: 쿠키런 : 오븐브레이크의 경우 대형 업데이트가 있을 때 마다 UI 업데이트를 강행합니다. 이로인해 기존 유저들의 반발심이 높으며 좋은 쪽으로 변화하면 상관없지만 나쁜 쪽으로 변화하는 경우가 많다 보니 오히려 예전 UI를 원하는 경우도 많습니다. 또한 UI 자체를 변화시키면 적응하는데 또 시간이 걸리다 보니 이를 선호하지 않는 유저들이 많습니다. 이의 문제는 크게 2가지로 나눌 수 있습니다.

 

1) 유저들에게 이유조차 알려주지 않는 마음대로식 변경

유저들의 인식 _ 네이버 쿠키런 : 오븐브레이크 공식카페

 

2) 너무 잦은 대규모 UI 변경

잦은 UI 변경에 대한 유저들의 인식 1 _ 네이버 쿠키런 : 오븐브레이크 공식 카페

 

잦은 UI 변경에 대한 유저들의 인식 2 _ 네이버 쿠키런 : 오븐브레이크 공식 카페

 

이렇게 유저들의 반발이 심하기 때문에 이미 있는 ‘실험실’의 기능을 확대하여 유저들에게 UI 변경안을 미리 적용시켜 플레이 해볼 수 있는 기능을 제공하여 전체적으로 변하기 전에 의견을 모을 수 있는 변동기간을 미리 가지는 것을 기획하였습니다.

기대효과 : 유저들의 의견을 수용하여 소통하는 쿠키런 : 오븐브레이크의 이미지를 생성할 수 있으며 계속해서 나오는 UI의 문제점을 유저들이 원하는 방향으로 개편할 수 있습니다.

 

예상 이미지 :

현재 실험실 – 단지 진동효과만 해볼 수 있음

포토샵을 이용해 기능을 추가한 실험실 예시

 

• 이는 체력바 효과 등 다양한 고민하고 있는 UI 효과들을 미리 유저에게 체험의 선택권을 주고 여기서 유저의 선택 및 납득을 하게 한 효과를 실제로 적용하면 현재의 불만의 목소리를 어느정도 해소할 수 있습니다.
• 또한 사진과 오른쪽의 부가 설명을 통해 왜 이러한 기능을 하려고 하는지에 대한 설명이나 이가 아니더라도 어떤 효과인지에 대한 간략한 설명이 있으면 유저들이 이해하기 좀 더 쉬울 수 있습니다.

 

3)    와사비 추천 개편

왼 : 와사비 쿠키의 조합 추천 / 오 : 트로피 경이 최고 조합 랭킹 (레전더리 쿠키 모두 존재)

 

: 현재 ‘와사비 추천’이라는 와사비맛 쿠키가 가지고 있는 쿠키 및 펫으로 가장 나은 조합을 꾸려주는 서비스를 진행하고 있습니다. 하지만 이게 오히려 점수가 낮게 나옵니다.

 

또한 트로피 경기 등의 경우 최고점수 조합은 대부분 레전더리 쿠키 및 펫, 보물이 사용되고 이는 뉴비가 참고할 수 없습니다. 따라서 자신과 비슷한 티어의 최고점수 조합을 볼 수 있는 서비스를 제공하여 뉴비가 컨텐츠를 좀 더 쉽고 재미있게 느낄 수 있도록 합니다.

 

기대효과 : 현재 효과가 없는 와사비 쿠키의 추천을 개편하여 뉴비들의 각 티어에 맞는 구간별 최고 조합 랭킹을 제공함으로서 트로피 및 떼탈출의 조합 구성의 어려움을 해소할 수 있으며 이로인한 뉴비들의 리텐션을 올릴 수 있습니다.

 

예상 이미지 : 

왼쪽 상단 : 와사비 조합 랭킹

와사비 조합 랭킹 체크박스가 생겨 자신의 티어와 비슷한 상대들의 조합랭킹을 볼 수 있도록 합니다.

 

 

 

4)    세부 디테일

: 이외의 추가적인 UI 개편 사항 중 현실성을 고려하여 쿠키런: 오븐브레이크 공식 카페에서 유저들의 이야기를 바탕으로 설정해보았습니다.

 

1. 쿠키/펫 창 위치의 롤백
2. 쿠키/펫/마탕 능력 동영상이나 사진 추가
3. 화면 및 글자 정렬 개선
   
   

기대효과 : 유저들의 의견을 수용하여 소통하는 쿠키런 : 오븐브레이크의 이미지를 생성할 수 있으며 계속해서 나오는 UI의 문제점을 유저들이 원하는 방향을 수용하면서 개편할 수 있습니다.

 

 

1>   쿠키 펫 창 위치

현재 :

현재 로비의 모습 : 왼쪽 하단이 보상 / 오븐패스로 변하였다.

 

롤백 :

과거 로비 모습 : 내 쿠키들이 위치하여 내가 가진 쿠키에 쉽게 접근할 수 있었다.

내 쿠키들의 위치로 다시 자신이 보유한 쿠키들을 볼 수 있는 창의 위치를 옮깁니다.

=> 가장 유저들이 많이 사용하고 오랫동안 위치한 자리로 유저들이 이미 적응이 많이 된 상태이기 때문에 이를 롤백하여 기존 유저들이 선호하던 UI를 유지합니다.

 

 

 

2> 쿠키/펫/마탕 능력 동영상이나 사진 추가

현재 쿠키 설명창의 모습

현재 쿠키의 설명창을 보면 쿠키가 어떤 능력을 가지고 있는지 말로만 설명이 되어있어 이를 이해하기 쉽지 않습니다. 

따라서 이를 사진이나 영상을 추가하여 사람들이 직관적으로 이를 이해할 수 있도록 합니다. 

-> 스토리나 i 버튼을 누르면 스토리와 함께 영상을 볼 수 있도록 합니다. 

 

 

능력 사진이 첨부되었을 때의 이전 UI _ 쿠키 / 마법사탕

 

 

3> 화면 및 글자 정렬 개선

핸드폰 화면 _ 네이버 쿠키런:오븐브레이크 공식카페

 

16:9 화면 미로 _ 네이버 쿠키런:오븐브레이크 공식카페

 

=> 위의 사진들을 보면 화면의 크기 및 배율에 따라서 정렬이 제대로 되지 않고있다는 것을 알 수 있습니다. 화면 뿐만 아니라 글씨 등도 정렬이 되지 않는 곳을 찾아볼 수 있습니다. 이를 전체적으로 정리하여 유저들로 하여금 깔끔한 화면 경험을 할 수 있도록 합니다. 

 

 

---

 STEP 02    DETAIL _ 콘텐츠 기획/개편 & DETAIL _ 연계 콘텐츠

콘텐츠 기획/개편 및 연계 콘텐츠의 경우 쿠키의 도전의 새로운 리뉴얼 등장 및 다양한 업데이트 등으로 인해 다음주에 진행할 예정입니다.

 

따라서 다음주 기획안에서 콘텐츠 기획 – 소울메이트 / 장애물 & 아이템런 , 연계콘텐츠 세부 디테일 내용 정리 및 이미지 생성을 진행할 예정입니다.

기획자로서,
위 목표는 기존에 세웠던 기획 내용의 UI 개선 디테일을 추가하고 기대효과 및 예상 이미지를 생성하여 현실성을 높이는 것에 목표를 가진다.
쿠키 눈 코 입 어디에? _ 끝