오늘의 과제는 프론트 엔드 탐색! PC 웹랜딩 페이지를 하나 정하고 HTML, CSS, 자바스크립트로 나누어 분석해 본다. 웹페이지 구조와 디자인 요소를 이해하고 페이지 내 인터랙션과 동작을 분석하여 웹기반 제품의 사용자 경험(UX)을 이해하는 것이 목표! 그럼 시작해볼게! 들어가서 랜딩 페이지가 정확히 뭐였지?
우선 랜딩 페이지를 배웠는데 모바일이 아니라 PC웹 랜딩 페이지를 해야 하니 잠시 혼란했다.모바일은 다운로드하고 바로 보이는 화면이 “가입””로그인””구독”등을 표시해서 랜딩 페이지다는 게 이해할 수 있습니다만, PC웹 페이지는 포털의 느낌이 강하고… 그렇긴 이것 저것 되는 페이지인데, 이것도 랜딩 페이지?잘 몰라서, 보다 정확히 알기로 탐색을 했다.랜딩 페이지의 의미는 Landing, 즉 착륙하는 웹 페이지를 의미한다.즉, 어떤 링크를 클릭했을 때에 도착하는 페이지이다.보다 실질적으로는 잠재 고객이 검색/온라인 광고로 브랜드 제품/서비스에 처음 접하는 페이지를 말한다.그래서 어떻게 고객이 클릭까지 하고 도착했을 때 마주 보는 첫 페이지인 랜딩 페이지에서 그 좋은 흐름을 이어받아 전환을 유도하기가 매우 중요하다.”시작”,”구독”,”지금 바로 구입한다” 같은 전략적 CTA(Call-to-Action)을 클릭할 목적으로 랜딩 페이지를 만드는 것이다.그럼 홈페이지와 랜딩 페이지는 아무 차이일까?주된 차이는 랜딩 페이지가 단일 마케팅/판매 목적의 적합하다는 것이다.즉, 오로지 원할 목표만 달성하게 가장 필수적인 정보만 제공한다.한편 홈 페이지는 어떤 전환/마케팅/광고 같은 “특정 목적”을 갖고 있는 상태가 아니기 때문에 최대한 많은 정보를 제공한다.그래서 정보량도 많고 단추도 많고..구조도 복잡하게 될 수 있다.이에 따른 나는 기본적으로 보는 네이버의 홈 화면이 랜딩 페이지보다는 그냥 홈페이지에 가깝다는 것으로 나타났다.그래서 쿠팡 제품 상세 페이지를 해야 하는가?”구입”라는 외도만을 위한 페이지다 때문이라고 생각하면…이래봬도 결국은 카카오 톡의 랜딩 페이지를 하기로 했어!(넷플릭스가 지나친···)카카오 톡의 랜딩 페이지 분석 HTML, CSS, JavaScript으로 프런트 엔드 탐색하다
카카오 톡의 최대의 전환은 무엇인가?카카오 톡은 아무래도 다운로드이다.모바일 앱에서 시작된 PC카카오 톡, 요즘은 업무 공간 등까지 확장되고 있지만 모든 것을 실행하려면 다운로드, 그리고 가입/아예 로그인이 필요하다.그러므로 나는 카카오 톡 다운로드를 검색하고 카카오 톡의 메인 페이지 링크가 나왔다.이 링크를 클릭하고 도착한 랜딩 페이지(Landing Page)를 지금부터 하나하나 분석한다.(그런데 랜딩 페이지가 왜 이렇게 긴가요??)HTML화면 구성 요소가 어떻게 배치되고 있는지 구조 정리, 분석 진단해야 할지 쩔쩔매지 않나!!!우선 이전에 스토리 보드를 작성한 것이 구성 요소와 정보를 정리한 것으로 기억되고 스토리 보드를 작성하도록 비 곰에서 분석 정리했다.
인기글
카카오톡 랜딩 페이지 상단 메뉴 / 중앙페이지 상단~중부 HTML분석 (출처본인제작)
** 글꼴이 손상되면 아래 피그마 드레스에서 확인하세요!
Figmawww.figma.com 에서 작성된 Figma
Figmawww.figma.com 에서 작성된 Figma
카카오톡 랜딩 페이지 중앙페이지 하단1,2 HTML분석 (출처는 본인제작)
** 글꼴이 손상되면 아래 피그마 드레스에서 확인하세요!
Figmawww.figma.com 에서 작성된 Figma
Figmawww.figma.com 에서 작성된 Figma
Figmawww.figma.com 에서 작성된 Figma
카카오톡 랜딩 페이지 중앙페이지 하단3,4 / 하단메뉴 HTML분석(출처본인제작)
** 글꼴이 손상되면 아래 피그마 드레스에서 확인하세요!Figmawww.figma.com 에서 작성된 Figma중간 회고 상단 중앙 상부 중부 하부처럼 나눈 것이 나중에 확인하고 보면 Header/Body(Section)/Footer라는 정식 이름이 있음을(피그마으로 만들어) 알았다!그래서 이 포스팅에서 정의와 정식 이름을 매칭 다음과 같이 정리합니다.상단 메뉴 = header 중앙 페이지 = body 그 중 상부, 중부, 하부 1, 2, 3, 4 → Section 1, 2, 3, 4, 5, 6 하단 메뉴 = footer+ 그런데 밑에서 코드를 열어보면 또 이 header/body/footer가 전체 페이지만을 가리키는 것이 아니라 부분 부분의 코드에 모두 사용되고 있습니다.. 뭐가 맞아?CSS각 구성 요소가 어떤 모양을 하고 있는지 스타일을 정리하고 분석<상단 메뉴 Header>메인 메뉴 기본 값은 검은 글꼴 선택 시 해당 메뉴만 검은 폰트, 나머지는 회색 폰트 선택 시 하단 심층 메뉴 둥근 박스, 검정 배경, 흰색 폰트에서 두드러지는 돋보기 버튼(검색)검색 엔진 창을 내뿜는 형태로 하고 오른쪽에 카카오 톡 자체의 인기 캐릭터(죠르니)배치 → 채팅 봇처럼 보이는 검색 엔진 하단에 해시 태그 형태로 추천 검색 키워드 제공 → 둥근 박스, 회색 배경<중앙 페이지 Body>상부 메인 카피 화면만 큰 검은 텍스트 공유 버튼을 키우는 Bold, 메인 복사본보다 조금 작지만 그래도 2번째로 큰 폰트 하부 1위 하에 카피와 이미지가 배치됩니다.메인 카피는 짙은 Bold제 검은 색, 옅은 회색 하부 2좌우에 카피와 이미지가 배치됩니다.메인 카피는 짙은 Bold체 흑색, 서브 복사는 작은 폰트, 엷은 회색 하부 3로고 이미지 배치다른 버튼은 회색 배경에 둥근 모서리지만 가장 중요한 ‘카카오 톡 안녕하세요 가이드’과 ‘다운로드’CTA는 눈에 잘 띄도록 검정 배경에 흰색 폰트, 둥근 모서리<하단 메뉴 Footer>JavaScript각 컴포넌트가 갖고 있는 특정 동작이 무엇인가를 정리, 분석(단,’ 다른 페이지로의 접속’는 제외)<상단 메뉴 Header>메인 메뉴 hover(클릭하지 않고 콘텐츠 위에 커서를 올릴 경우 해당 메뉴만 검은 글꼴 나머지 그레이 폰트로 변경 클릭하면 하단의 심층 메뉴 등장 커서를 다른 장소로 이동해도 심층 메뉴가 사라지지 않는 → 닫으려면 해당 메인 메뉴를 다시 클릭하면 언어가 먼저 영어에 변경되어 미묘한 뒤늦게 화상도 영어 이미지로 변경 중앙 버튼> 사라지고 반대로 아래에서 위로 스크롤 하면 중부 페이지가 페이드 아웃되면서 화상이 위에서 아래로 내려가며 등장 하부 1<>화살표 버튼 클릭했을 때, 모바일 스와이프 하도록 옆으로 옮겨인터랙션 하부 2추가 서비스 설명 페이지 섹션(스크롤에서 콘텐츠 전환)상하 방향과도 스크롤을 다 하지 않으면 다음 섹션으로 나아가지 않는 것을 보면 모두 거쳐야 한다 화면 같다.하부 4추천 콘텐츠 hover시 위에 약간 떠오르는 상호 작용과 동시에 그림자가 길게 짙어진 Top에서 이동 버튼과 똑같이 hover할 경우 색이 희미해지고(명도가 낮아진다) 변한다<하단 메뉴 Footer>메인 메뉴 카카오, 뉴스, 기술과 서비스, 약속과 책임…hover 할 경우 왼쪽에 노란색 점이 생긴다는 메뉴 hover 할 경우 기존 회색→검정색으로 글꼴 색이 변하는 기능 구현 코드를 찾는 여러 기능 중 하나의 기능 구현 코드 알아보기카카오톡 랜딩 페이지의 여러 기능 중 가장 인상 깊었던 기능은 하단 2에서 스크롤할 때 화면 넘기는 것과 하단 메뉴 추천 콘텐츠로 hover 시 떠오르는 인터랙션이다. 이중 스크롤로 화면을 넘기는 부분의 코드를 열어본다.그래도 보이는 것을 좀 정리하면 style=”overflow-y:scroll”>이 부분에서 스크롤을 이용하고 상호 작용을 한다는 내용 같다.또 아래의 화상(. js 푸른 색 클릭 가능한 부분을 클릭한다)을 보면 우측 상단 overflow-x:hidden;overflow-y:scroll;word-break:keep-all;word-wrap:break-word;이 부분도 스크롤 상호 작용에 관련할 것으로 예측된다.. js부분을 클릭하면 오른쪽에 폰트 크기, 줄의 높이, 글꼴 종류, 색 등 스타일의 부분이 나왔다.이 부분이 CSS이라고 생각한다.잘 보면, 해당 송어의 오른쪽 위로 e041652.css:1이 되는 것을 보면 CSS를 제대로 찾은 것 같아!그런데, 아래에 Inherited from html은 왜 색 정보만 있는지..html은 정보의 구조와 배치이라고 생각했지만 색깔은 스타일은 아닐까?아니면 제가 위로 구분한 것처럼 중요한 것은 검고 진하고 폰트, 중요하지 않게 흐린 회색 폰트처럼 색깔을 통한 정보 체계를 정의하는가?흑이 명도의 차이만 두고 미묘하게 계층적으로 줄지어 있는 것을 보면 그럴지도 모른다.분석을 마치고 하아… 하고 보면 처음 네이버가 너무 할 많고 요소가 많아서”홈페이지”이라 랜딩 페이지를 찾고 네이버를 버렸는데… 그렇긴카카오도 하고 있어 상단 메뉴부터 할 일이 많아서이 랜딩 페이지에서 맞나?…이에 나이 생각은 하더라^_ㅠ 않나!!!역대급의 공들인 과제(x3)···그런데 다른 동기들의 과제를 보면 코드를 잘 분석할 목적으로 코딩을 알면 여기까지 고생하지 않았을 걸까?나는 내가 생각하는 각 부분을 분석하고 정리하려고 한 데···과제 문제를 잘 이해했다고 생각하면 나만 다른 형식의 과제가 나온 듯 당황… 그렇긴 해도 사실은 무엇이든 정답은 없지만, 이 과제를 하면서 힘들었지만 시간이 흐르는 것도 잊고 몰두하고 한 것 같다.뭔가 지금까지의 과제 중에서 가장 실제적인 기분이 되었기 때문일까?아무튼 나의 방식이 조금 달라도…이래봬도나름대로 위에서 분석을 많이 하고 코드를 열어 보면 코딩에 대한 공부를 떠나지 않았음에도 불구하고”이 부분이 이 부분이다”라는 것이 보이고 의미가 있었다고 생각한다.[참고자료 출처]랜딩페이지설명 https://ko.wix.com/blog/post/what-are-landing-pages-how-to-use-them-wisely#viewer-7mt95https://imweb.me/blog?idx=129&category=insighthttps://www.youtube.com/shorts/NwYyli3XqtA