제작기: BTY+ 랜딩페이지
(영상삽입영역 - GIF 용량 초과로 업로드 불가)
안녕하세요. 비티와이플러스 콘텐츠 디자이너 H입니다. 7월 중순, 비티와이플러스가 어떤일을 하는지 알리기 위한 랜딩페이지를 제작하였습니다. '우리의 콘텐츠를 만들거야'의 다짐을 가지고 제작한 과정. 같이 살펴볼까요?
1단계: 기획서 검토하기
기획서(초안)를 전달받았습니다. 기획서를 토대로 디자인 시안을 풀기까지 1일. 외주 프로젝트까지 병행해야 했기에 주어진 시간은 많지 않습니다! '이런 걸 만들어요' '이런 결과를 만들어요' '이런 것에 집중하고 이런 일을 해요'
3가지 영역의 기획 의도를 파악해, 직관적으로 보여줄 수 있는 레이아웃을 구성해야합니다. But, 빠듯한 일정 속에 작업 방향을 딥하게 논의할 수 없기에 디자인 파트에서 레퍼런스를 취합해 전달하기로 했습니다.
협업 플랫폼: 알로
빠른 작업 시작을 위해 알로를 켰습니다. 비티와이플러스는 ‘알로’라는 업무 툴을 사용합니다. 기획서와 시안을 공유할 때 필수이죠.
알로는 자유로운 아이데이션, 문서작성 및 편집, 고용량 파일 공유도 가능합니다. 제 2의 사무실, 외장하드 이기에 알로 없는 오피스는 상상도 할 수 없습니다.
2단계: 레퍼런스 조합하기
알로에 분석&레퍼런스를 조합하기 위한 보드를 생성하였습니다.
[기획서를 분석하는 과정]
- 상단, 중간, 하단 영역을 나누기
- 3개의 영역에서, 세부적으로 쪼개기
그리고 영역의 내용을 잘 담아낼 수 있는 레퍼런스를 리서치 합니다. 퀄리티가 보장되는 실제 게시된 작업물을 참고하는 편입니다.
[상세페이지 레퍼런스를 얻는 사이트]
핀터레스트 (https://kr.pinterest.com/)
GDWEB (https://www.gdweb.co.kr/)
교육 플랫폼 (탈잉, 패스트캠퍼스등)
리서치한 레퍼런스에서 적합한 영역을 캡쳐해 기획서 흐름에 맞게 조합합니다. 이렇게 만들어진 ‘콜라주‘을 가지고 디자인 논의를 진행 했습니다.
레퍼런스를 가지고 미팅을 하며 기대한 비주얼이 아닌 부분을 초창기에 잡아낼 수 있었고, 또한 어떤 것을 원하는지 쉽게 파악할 수 있었습니다. 이런 과정을 3-4차례 거쳤고, 디자인 컨셉을 확정지어 작업에 들어 갈 수 있었습니다.
3단계: 더미 → 디자인 제작 과정
레퍼런스 시안이 완료 되었지만, 내부 일정 상, 기획서는 디벨롭이 어려운 상황. 내용 없이 제작이 어렵지만, 그래도 해야하는 법.
다행히 더미를 넘기면 레이아웃에 맞추어 내용 작성을 진행하겠다고 협의가 되었습니다. 페이지 레이아웃을 채울 텍스트를 넣어야 합니다.
한글 로렘 입숨 사이트: 한글 입숨 (https://hanipsum.com/)
[로렘 입숨이란?]
로렘 입숨(Lorem ipsum)은 출판, 디자인 분야에서 레이아웃이나 디자인을 미리 보여줄 때 사용되는 더미 텍스트입니다. 실제 의미가 없는 라틴어 문장들을 조합하여 사용하며, 디자인 요소, 폰트, 레이아웃 등을 시각적으로 보여주기 위해 사용됩니다. 최종 콘텐츠가 채워지기 전에 디자인의 시각적 효과를 확인하는 데 유용합니다.
한글에도 다양한 로렘입숨이 있습니다.
- 애국가, 문학, 성명서 등 내용을 읽을 수 있는 글
- 해석하기 어려운 문장들
저는 2번의 로렘입숨을 선택했습니다. 해석하기 어려운 문장들이 글 작성을 방해하지 않고 '더미'의 특성을 가지고 있음을 판단했기 때문입니다.
더미를 넘긴 당일, 상세페이지에 들어갈 내용과 자료를 전달받았습니다. 바로 더미에 내용을 갈아끼웠고 빠르게 작업을 완성하였습니다.
회고: 새로운 태도를 가지고 임하기
비티와이플러스의 콘텐츠를 만드는 과정이 외주 프로젝트를 병행하며, 5일안에 진행할 수 있었습니다.
이 과정을 통하여 정확하고 빠른 제작을 위해선 담당자와의 소통을 통해 작업이 가진 목표, 방향에 대한 논의가 필요함을 깨달았습니다.
리소스를 줄이기 위한 방법을 탐구하고, 리서치한 노하우를 실무에 적용하는 태도를 가져가보려고합니다.
감사합니다.