Story Nation
세계관을 만들과 함께 확정시키며 수익화하는 '우주문방구'의 오픈 컨텐츠 플랫폼 ‘스토리네이션’!
새로운 개념의 IP 서비스를 제공하는 스토리네이션의 정보들은 직관적이고 쉬워야합니다.
이번 포트폴리오에는 스토리네이션에 참여한 6개월 동안의 UI 수정사항 중 일부를 담았습니다.
Color System
강력한 인상을 주는 고채도의 파란색과 플레이그라운드(play ground)의 즐거운 느낌을 연상시키는 고명도의 노란색을 Primary color와 Second color로 선택했고, 이 둘을 연결시켜주는 보조색을 사용해 컬러 시스템을 구상하였습니다.
Font System
"텍스트 기반"의 창작 플랫폼인 "스토리네이션" 특징을 고려하여 가장 가독성이 좋은 Noto Sans CJK를 메인 폰트로 사용하고, 장난스럽고 가시성이 높은 보조 폰트로 폰트 시스템을 완성하였습니다.
Icon Style
"재미 있는" "플레이그라운드"의 느낌을 살려, 만화스러운 효과를 일러스트 요소로 활용하였고, 로고를 사용하여 플랫폼의 개성을 드러냈습니다.
Splash Screen
스플래쉬 화면은 세계관 공동창작 플랫폼 '스토리네이션'의 즐거움을 우주에 두둥실 떠다니는 아이콘으로 상징하여 디자인하였습니다.
특히나 플랫폼에 입장할 때마다 변경하는 다양한 텍스트는 개성있는 플랫폼의 성격을 보여줄 뿐만 아니라
플랫폼을 통해 유저들이 '어떻게 재미있게' 놀 수 있는지를 구체적으로 보여주어 기대 심리를 높입니다.
세계관 페이지
스토리네이션의 가장 핵십적인 페이지인 '세계관 페이지'는 유저들이 자신들이 만든 세계관을 전시하여 다른 유저들의 세계관 가입을 유도하는 페이지로, 스토리네이션의 고유한 '세계관 시스템'에 속한 많은 정보를 전시하며 동시에 세계관의 각각의 개성을 보여주어야하는 페이지입니다.
수정 전 디자인은 세계관 대표 이미지가 눈에 띄지 않아
각각의 세계관들의 개성이 직관적으로 인지 되지 않고 하단탭이 보이지 않아 플로우가 복잡하다는 단점이 있었습니다.
새롭게 수정한 페이지는 세계관 이미지를 전면 배치하였고 폰트와 간격을 조정하여 시각적으로 좀 더 완성도 있게 재배치하였습니다.
또한 제일 중요한 핵심 유도 버튼을 하단 탭 위에 고정하였습니다.
스토리 페이지
'스토리'는 '세계관'의 하위 개념으로 '스토리 페이지'는 세계관을 기반으로 유저들이 창작한 이야기들을 보여주는 페이지입니다.
스토리 페이지 수정 시 고려했던 사항은 다음과 같습니다.
1. 컨텐츠의 영역이 크게 보이도록 박스 디자인 삭제
2. 후원보내기의 버튼을 좀 더 조화롭게 수정
3. 스토리가 포함된 세계관의 영역을 기존의 단색이 아닌 투명도를 넣은 배경 이미지로 변경해 세계관에 대한 힌트를 시각화
4. 세계관 페이지의 일관성
설정 페이지
'설정'은 '세계관'과 '스토리'의 하위 개념으로 세계관을 구성하는 인물, 장소, 시간 등 카테고리별 요소들을 전시하는 페이지입니다.
이전 디자인은 유저들이 세계관의 구체적인 설정을 파악하려면 한 뎁스(two-depth) 더 들어가야했고,
또 카테고리들을 한눈에 모아보기 어려워 세계관의 특징을 직관적으로 파악하기 불편한 단점이 있었습니다.
새롭게 수정한 페이지는 카테고리별 패턴 디자인을 삭제하고 카테고리 요소들을 가로 스크롤링을 통해 바로 볼 수 있도록(one-depth) 수정했습니다.
