제작기: 길벗스쿨 한글파닉스 페이지

(영상삽입영역 - GIF 용량 초과로 업로드 불가)

안녕하세요. 비티와이플러스 디자이너 H입니다. 비티와이플러스가 특출난 분야 중 하나는 유아동 제품입니다. 그 중 올해 상반기 4억 7천만원(47,325,000원 달성, 9,465%)판매를 달성한 길벗스쿨의 한글 파닉스 제품이 있는데요. 와디즈의 잠재적 소비자들을 구매로 이어지게 한 매력적인 페이지의 제작 과정을 소개합니다.

(영상삽입영역 - GIF 용량 초과로 업로드 불가)

1단계: 기획서 분석

유아동 제품의 도서 제품은 소비자에게 설명할 내용이 많아, 대부분 깁니다. 책을 직접 보고 플레이하지 못하니 저희가 대신 제품의 기능과 의도를 체험하듯 전달해주어야 하죠.

디자인 제작에 들어가기 전, 기획서를 검토합니다. 제품 존재의 의미가 무엇인지, 어떤 기능을 가졌는지. 또한 신뢰와 매력을 전달해야하는 브랜드 스토리까지. 글을 어떻게 끊고, 시각화할 것인지 분석합니다.

업체에서 전달받은 제품 관련 소스들도 검토합니다. 다양한 소스와 자료 파일이 많을수록 제작의 퀄리티가 높아집니다. 더불어 제품의 디자인 히스토리를 이해하는데 도움이 됩니다.

2단계: 디자인 방향 잡기

제품의 기획서 분석을 마쳤고, 국내에서 '특별한 한글 파닉스'라는 제품을 보여줄 디자인 컨셉을 정합니다. 비티와이플러스가 제작하였던 ‘영어 파닉스*******와 E*****’ 페이지를 참고했습니다.

영어 파닉스 페이지는, 간결한 영역 구분의 디자인을 참고하였고 E***** 페이지는, 디자인 컨셉을 참고해 디벨롭하였습니다.

폰트 선정

이전의 상세페이지 'E*****'는 여기어때 폰트, 나눔스퀘어 라운드 폰트를 사용했습니다. '영어 파닉스*******'는 이사만루체, 나눔스퀘어 폰트를 사용했습니다.

이번 작업에서는 유아동 제품은 획이 두껍거나 둥글어야, 부드럽고 사랑스러운 느낌을 전달할 수 있습니다. 배경과 글자의 색 구분이 명확해야 정보 전달이 되기에 기존의 서체들 특징인 획이 두꺼운 폰트로 가기로 결정. 또한 통통하며 귀여운 느낌의 정체성을 가진 폰트를 서치했습니다.

그리하여 고른 폰트는 '엘리스 DX널리체' 엘리스는 국내 최초 AI 교육 실습 플랫폼이며, 자체 제작하여 무료배포한 서체입니다. (감사합니다🙏) 글자에 각이 져있지만, 간혹 보이는 곡선의 형태가 유연성을 보여주어 인간적입니다.

글 정렬

일반적으로 디자인에서 글줄 정렬은 용도가 있습니다. 글의 가운데 정렬은, 모바일에서 선호하는 글줄입니다. 글줄이 짧거나, 타이틀용으로 사용합니다. 왼쪽 정렬은, 책이나 인쇄 미디어에서 볼 수 있는 글줄입니다. 글줄이 길거나, 설명용으로 사용합니다. 오른쪽 정렬은, 글줄이 짧거나 표시 및 꾸밈용으로 사용합니다.

미디어 관계 없이 상세페이지를 제작할 때 3가지 모두 사용합니다만, 아동 출판 제품은 설명할 부분이 많아, 왼쪽정렬을 주로 사용합니다.

(영상삽입영역 - GIF 용량 초과로 업로드 불가)

기획서를 검토하며, 글을 끊어 단락을 나눕니다. 또한 글을 시각화할 수 영역이 있다면 인포그래픽으로 표현합니다.

책 일러스트 소스 사용

유아동 도서 제품의 장점은, 페이지에 사용할 소스가 많은 점입니다. 벡터 파일인 ai,eps,svg로 받아, 캐릭터와 배경을 뜯어 각 단락에 맞는 요소로 사용합니다. 또한 꾸밈요소로 최고의 자료이기에, 제작에 들어가기 전 업체에서 파일을 빠짐없이 공유를 받는다면 그만큼 퀄리티도 올라갑니다.

파일의 없거나, 공유가 늦는다면 퀄리티는 떨어지고 작업시간은 늘어나게 된답니다.🥲

3단계: 디자인 제작

포토샵과 일러스트레이터를 사용하여 제작합니다. 포토샵은 상세페이지 제작, 전반적인 소스 가공, gif제작을 하기에 비티와이플러스의 메인 프로그램입니다. 일러스트레이터는 로고 및 백터 소스의 편집에 주로 사용되어 메인에 맞먹는 중요한 프로그램입니다.

기획서 분석과 디자인 방향을 잡는 단계를 거치면 제작은 1-2일내로 완료됩니다. 중간에 내용이 변경되거나, 미작성인 영역이 있다면 제작일은 2-3일로 늘어납니다.

이 제품의 제작은 2일이 소요됐습니다. 2차 수정을 거쳐, 최종 확정되어 원활히 마감을 하였습니다.

디자인 방향이 달랐던 부분,

기획서에서는 하나의 설명글로 받았습니다. 사용 방법을 보여줄 때, 스텝별 사용설명이 제품 사용에 도움을 주기에 단계별로 나누어서 표현하였습니다.

그렇지만 업체의 피드백은 하나의 행동을 글로 서술한 것이기에 단계를 나누지 않아도 됨을 이야기해주었습니다. 이 일을 통해 업체의 의도를 파악하여 알맞게 표현해야 함을 깨달았습니다.

회고

유아동페이지는 페이지를 영하게 꾸며가며 작업할 수 있는 점이 즐겁습니다. 그런 페이지가 소비자를 설득하여 판매가 되고 있는 것을 보면 뿌듯하고 일의 보람을 느낍니다. 또한 완료된 제품 페이지를 돌아볼 때 드는 아쉬움은 개선하여 다음 작업때 퀄리티를 높입니다.

비티와이플러스는 여러분의 브랜드, 제품의 성장을 돕습니다. 이 여정을 함께하실 분들의 연락들 기다리겠습니다.