필요한 만큼은 보여 줬다
Daily Ui 3일 차
Daily Ui
'Daily Ui'는 하루에 하나씩(주말 제외) 주제를 이메일로 보내주며 '형태'에 구속받지 않고 내 맘대로 디자인하여 #daily ui를 붙여 인터넷 세상에 공유하는 챌린지를 운영한다. 이는 100일 동안 계속되며 중간중간에 상품을 지급한다고 한다.
3일 차의 주제는
랜딩 페이지
랜딩 페이지는 다소 생소할 수 있는 단어들이다. 랜딩 페이지는 사용자가 광고를 통해 우리 사이트에 들어왔을 때 처음으로 만나는 페이지다. 또한 CTA(액션 유도 버튼 : 사람들이 구매하거나, 구독, 예약 등 비즈니스 목표에 걸맞은 행동을 취하도록 유도하는 기능)로 유저의 이탈을 막고 유저의 관심을 끌 수 있습니다.
미리캔버스 렌딩 페이지https://www.figma.com/file/oDvD5dHAuNAP7dMHIeatVU/1-10?node-id=55%3A1255&t=6WeTiwzdR1LUfDr2-1
3일 차 Ui의 컨셉은 호구다. 내가 갖고 있는 것은 다 보여주며 그저 몸만 오라고 하는 호구처럼 내가 갖고 있는 모든 것을 다 보여주는 컨셉이다.
사용한 폰트는 Libre Baskervile이다. 본문 텍스트(일반적으로 16px)에 최적화된 웹 글꼴이다. x-높이가 크고 카운터가 넓으며 대비가 덜하여 화면에서 읽기에 적합하다.
컬러칩은
Black(Hex : 000000)
Gray(Hex : 555555)
White(Hex : FFFFFF)
를 사용하였고 상단의 피그마 링크에 접속을 하여 더 자세하게 볼 수 있다.
https://fonts.google.com/specimen/Libre+Baskerville
Ui에 대한 설명을 하기 전에 오늘의 작업에 대해 설명하겠다. 이번 작업은 모델 에이전시의 페이지를 작업하였다. 모델들 중 패션모델을 중점적으로 관리하는 에이전시로 구상하였다. 모델이라는 직업상 카메라에 비치는 모습이 많을 거 같아 이미지를 중점적으로 사용하였다.
에이전시에게 가장 중요한 것은 무엇일까? 클라이언트들이다. 클라이언트에 입각하여서 어떤 것을 원할까를 생각해 보고 만들었다. 클라이언트들이 페이지들을 보고 들 생각을 글을 써 내려가며 인용하겠다.
첫 화면이다.
광고를 클릭하면 들어오는 화면인 만큼 우리 에이전시의 성격을 보여주는 패션쇼 동영상을 재생하였다.
어? 얘네 이 쇼에도 참여했네?
클라이언트가 에이전시에게 연락하는 방법은 다양하지만 나는 이메일로 컨택하는 방법을 취했다. 이메일이 갖춰진 형식이 없는 만큼 자유로운 형태로 컨택할 것이다.
다음은 모델들의 클로즈업 사진들이다. 모델들의 개성 넘치는 얼굴들을 보여주며 클라이언트에게 어떤 모델을 보유하고 있는지 알려주는 페이지이다. 클라이언트는 에이전시에게 컨택하기 전 어떤 모델과 작업하고 싶은 지에 대한 답을 얻을 수 있는 페이지이기도 하다. 해당 모델에 호버 하면 나오는 프로필 버튼을 누르면 해당 모델의 프로필을 볼 수 있다.
저 쇼에 참여했던 이유가 다 있네. 모델 채용을 철저하게 하는 거 같네?
마지막으로 어떤 프로젝트에 참여했는지 보여준다.
보그랑 아더에러랑 작업을 해봤네?... 오..
클라이언트가 원하는 것은 무엇일까? 모델과 이 에이전시가 주관 혹은 참여했던 프로젝트들일 것이다. 새로운 에이전시를 발굴하는 시도를 할 수 있겠지만 여러 프로젝트에 이미 참여했던 에이전시를 찾는 것이 비교적 쉬울 것이기에 프로젝트들을 보여주는 것은 당연한 것이다.
짧게 쉬는 시간을 가지겠다. 나는 랜딩 페이지라고 작업을 해놓고 보니 홈페이지 같았다. 물론 겉으로 보기엔 크게 다르지 않을 것이다. 이참에 랜딩 페이지와 홈페이지의 공통점과 차이점에 대해 설명해 보겠다.
공통점은 두 페이지 다 웹사이트의 트래픽을 높이기 위해 디자인되었다는 것이다. 쉽게 말하면 웹 사이트의 접속 수와 접속 기간을 늘리기 위함이다.
차이점은 랜딩 페이지는 특정 1 ~ 2개의 액션을 유도하지만 홈페이지는 액션에 제한을 두지 않고 제작하여도 된다.
두 페이지의 목적이 다르기에 목적에 맞게 디자인을 하면 좋을 것이다.
https://ko.wix.com/blog/post/what-are-landing-pages-how-to-use-them-wisely
https://channel.io/ko/blog/landingpage_v1
앞에서 거듭 언급했다시피 오늘의 작업은 클라이언트의 전두엽에 들어가 '내가 에이전시에게 원하는 것은 무엇일까?'만 생각을 하며 작업했다. 즉, 페르소나를 에이전시를 찾고 있는 클라이언트(A)로 설정을 하여 UX를 풀어나간 것이다. 학교 과제에서도 이와 비슷한 작업을 해봤는 데 확실히 페르소나를 설정하는 것만으로도 컨셉이 확실히 잡히고 여러 갈랫길에서 '내가 A라면 무엇을 택할까?'라고 고민을 하니 수월하게 작업했던 것 같다.
끝으로 오늘의 글은 좀 짧다. 짧은 만큼 간결하게 생각하고 사고 시간이 그리 길지 않았다는 것이다.(페르소나를 잡다 보니)
옴 피그마에 비디오 쪽 프로토타입이 대량 업데이트되며 피그마에 비디오로 할 수 있는 것이 많아졌으니 관심 있으면 피그마 홈페이지에 들어가 보는 것도 좋을 것 같다.
