더 좋은 웹을 위한
우리의 고민

홈페이지 제작에 있어 
점차 발전하는 웹 페이지 구상 중 하나인
원페이지, 스토리 페이지에 대해 이야기 드리고자 합니다.

웹에이전시 종사자로서 홈페이지 제작을 진행하기 앞서
홈페이지 제작을 맡기는 입장에서
홈페이지를 제작하는 실무자 입장에서
내게 맞는 페이지 구성은 무엇인지 참고하는 지표가 되시길 바랍니다. :D


 

1.원페이지란??

원페이지(One Page)는 
일반적인 홈페이지의 다양한 페이지를 구성하는 것이 아닌,
하나의 페이지에서 담고자 하는 콘텐츠를 표현하는 방식입니다.




1) 홈페이지 제작을 맡기는 입장에서는 

원페이지 안에 콘텐츠를 담아야 하므로,
카테고리가 적고,  콘텐츠가 적을 경우 추천합니다.

일반적인 홈페이지보다는 구성 자체가 간결하기 때문에
기간과 비용적인 측면에서 유리하며,

특히 프로모션 홈페이지처럼
한 가지의 제품과 서비스를 강조하기 위한 페이지에서 자주 사용합니다.
(이는 하단의 스토리 페이지와 연계됩니다.)


 

외국의 기본적인 원페이지 구성입니다.

다소 차이는 있지만, 원페이지 구성을 차용하였습니다.


다만, 속도 면에서 메인 페이지(index)에서 전체 콘텐츠를 보여주므로
로딩 시간과 트래픽이 일반 페이지보단 높으며,
다양한 콘텐츠를 원페이지에 모두 담아낸다면
사용자가 활용하기(접근성) 어렵습니다.

원페이지는 다소 정형화된 구성이 아닌 만큼
디자인, 유행에 민감한 홈페이지에 사용하시는 것을 추천합니다.








2) 홈페이지 제작자(실무자) 입장에서는

스크롤을 내리는 방식이 사용자에게 익숙한 만큼
원페이지는 일반적으로 수직 구성을 가져갑니다.
(간혹 아래와 같은 수평 구성도 사용합니다.)

http://www.storytrail.co/rome/navona-and-coronari

휠을 아래로 내리면 이와 같이 수평으로 움직이지요!


또한 패럴렉스 스크롤(스크롤 시차 기법)을 사용하여
동적이고 인터랙티브하게 표현합니다.

http://howau.co.kr/

보건복지부 중앙자살예방센터의 괜찮니 캠페인입니다.
오프라인에서 진행하는 캐릭터를 활용하고
한마디의 작은 관심이 자살예방의 시작이라는 컨셉의 홈페이지입니다.

미니멀하게 요소요소에 패럴렉스 스크롤을 활용하였습니다.
(잘 찾으시면 숨겨진 요소들이 많습니다. 제작자의 묘미이죠!)

앞서 이야기 드렸던 속도 문제를 위해
로딩 버튼을 구축하였고, 전체 데이터를 불러오는 것이 아닌
AJAX 형태로 일부 데이터만을 불러온 뒤 스크롤 시 하단의 데이터를 불러오도록 설계하였습니다.

또한 풀 페이지 레이아웃(꽉 차있는 화면)과
이에 따른 페이징 스크롤(fullpage js의 기본 기능이죠!)를 주로 같이 활용합니다.

이 두 가지는 제작자가 컨셉에 맞춰 조합하시면 되겠지요? :D











 

2.스토리페이지란??

스토리 페이지는 
원페이지에서 스크롤을 내림에 따라 연결되는 스토리 방식의 구성인데요.
원페이지에 스토리텔링을 녹인 페이지라 보시면 됩니다.
(원페이지와는 다르게 공식? 적인 명칭은 아닙니다.)




1) 홈페이지 제작을 맡기는 입장에서는 
기본적으로 홈페이지 전체 컨셉에서 각 메뉴마다의 위치와 구성은
하나의 스토리로 구성되어야 합니다.

이러한 뼈대? 가 스토리로 구성되고
특별하게 강조하게 되는 페이지(제품 또는 특수한 콘텐츠)에서
스토리 페이지를 구축합니다.

스토리 페이지의 경우, 강조하고자 하는 콘텐츠인 만큼
일반적 원페이지와는 다르게 해당 콘텐츠의 이해도를 바탕으로
기획 기간이 높습니다.

단순한 디자인을 화려하기 보다,
해당 스토리가 콘텐츠에 적합한지,
이러한 콘텐츠를 보다 효과적으로 보여주는 디자인과 기술은 무엇인지

단순하게 템플릿을 활용하여 공장에서 찍어내듯 만들어내기 어렵기에
기획 기간 증대와 직접 제작해야 되는 부분이 있습니다.
(실제 기획의 강점을 갖은 웹에이전시에서 진행하시는 것이 좋습니다.)

기간이 오래 걸리고 난이도가 높은 작업인 만큼
정말 주요 페이지에서 활용하시는 것을 추천합니다.

http://www.mi.com/en/miband2/

샤오미의 Mi band 2는 제품의 특장점을 이야기 형식으로 풀어나갔습니다.
(제품 부속품을 나눠주는 View는 신선했습니다.)

실제 페이지에 들어가 휠을 내리시면 더욱 실감 나게 느끼실 수 있습니다.







2) 홈페이지 제작자(실무자) 입장에서는

스토리페이지 제작은 해당 제품과 서비스에 몰입하여
아이디어를 내고 어떤 방식으로 표현할지 끊임없이 고민해야 합니다.
(기획자, 디자이너, Front-end & Back-end 개발자 모두가)

즉, 다채로운 디자인, 어려운 Script 개발도 중요하지만,
이를 표현하는 아이디어가 바로 핵심입니다.

워크샵, 브레인스토밍, 끝장? 토론과 같이 
어마 무시한 회의 시간이 걸리겠지요.






원페이지든, 스토리 페이지이든
제작 목적과 예산, 브랜드 아이덴티티에 따라
선택적으로 활용하시는 것이 중요합니다.

다들 원페이지 구성의 홈페이지를 제작하여 트렌드 하다 느껴지지만,
꼭 자신과 어울리는 구성으로 홈페이지 제작을 진행하시기 바랍니다!!

이상 원페이지, 스토리페이지에 대해 알아보았습니다. 







모든 글은 제가 직접 작성하였으며,
해당 저작권 및 모든 내용은 복재 가능합니다.
(다만, 출처만 남겨주세요! :D)



사용자의 바람 에 고민합니다.
다채로운 속 집중을 통해
더 좋은 웹을 꿈꿉니다.

디자인과 기술이 융화된 디지털 서비스를 만듭니다.