네이버 지식백과 메인 화면을 프론트 언어로 해부해보자 (W7D1)

과제 ) 프론트엔드 탐색하기

1. 관심 있는 프로덕트의 웹 랜딩 페이지를 찾고, 이를 다음과 같이 나누어 분석해 봅니다.

• 화면의 구성 요소들이 어떻게 배치되어 있는지 구조를 정리해 분석해 봅니다.(HTML 요소)
• 각 구성요소들이 어떠한 모양을 하고 있는지 스타일을 정리해 분석해 봅니다.(CSS 요소)
• 각 구성요소들이 가지고 있는 특정한 동작이 무엇인지를 정리해 분석해 봅니다.(JavaScript 요소) (단, 기능 중 '다른 페이지로 연결'은 제외합니다.)

2. 선택) 분석한 내용 중 하나를 선택해 해당 기능을 구현하는 코드가 어떻게 되는지에 대해 찾아보고 간략하게 정리해 봅니다.
(크롬 브라우져 기준 F12 or 메뉴 ‘보기’ → ‘개발자 정보’ → ‘개발자 도구’를 클릭해, 해당 코드가 어떻게 구성되어 있는지 확인해봅니다. ex. URL, 이미지, 텍스트, CSS 스타일 등

선정한 서비스가 어떤 기능과 특징이 있는지 정리하였는가?

해당 서비스의 구조적 요소를 HTML과 연관지어 분석하였는가?

해당 서비스의 스타일 요소를 CSS와 연관지어 분석하였는가?

실제 서비스와 프론트엔드 코드의 관계에 대해 생각해 볼 점들을 정리하였는가?

세 요소중 하나를 선택해 실제 기능이 코드로 어떻게 구현되었는지 분석하였는가?

해당 서비스의 기능적 요소를 JavaScript와 연관지어 분석하였는가?

 

⊙ 과제의 핵심 용어(또는 이론)

프론트엔드를 구성하는 언어
HTML: 구조 세우기 / 개발 편의성을 위해 생김
CSS: 예쁘게 꾸미기 / 반응형
JavaScript: 상호작용 넣기 / 웹 브라우저용 유일한 코딩 언어

개발자 도구를 보고 프론트엔드 언어가 화면을 구성하는데 어떻게 사용되었는지 분석하는 게 오늘 과제의 핵심이다.

---

 

다룰 Product

네이버 지식백과

네이버 어학사전, 번역기와 함께 네이버 사전 시리즈를 이루고 있으며
단일 백과사전이 아닌 여러 사전들을 종합 제공. 설명 출처
2000년에 최초로 시작되어 2011년 '지식사전'으로 이름을 바꾼 뒤, 2012년에는 다시 현재의 이름으로 다시 개명
링크 네이버 사전 블로그

이름	채널	분야	단계	시장 상황	출시	국내외
지식백과	모바일 어플,웹	백과사전 서비스	슈퍼	공공	2000	국내

모두가 잘 아는 서비스이니 자세한 내용은 생략한다. 하이퍼텍스트 기반으로 항목(아티클, 게시글)을 넘나들며 텍스트 위주의 정보를 확인하는 서비스다. 사전 목차를 통해 표제어 간 이동하기, 유익한지 아닌지 반응을 추가하기, 이미지만 모아서 보기 등의 기능이 있지만 색다른 기능이 아닐 뿐더러 랜딩 페이지에는 드러나지 않는 부분이기 때문에 설명은 생략한다.


선정 사유는 과제에서 묻지 않았으니 생략함. 대충 쓰자면 위키 도메인에 관심 있는데, 참여위키면서 나름 뭐가 잘 되어있던 위키독은 세상에 작년 마지막 날에 폐쇄했다고 한다. 위키배움터를 할까 했다가 그냥 몇 번이라도 써본 거 하자는 생각에 지식백과로 방향을 틀었다. 왜 썼었냐면, 아는 척하고 싶은데 개념만 떠오르고 단어가 생각 안날 때 찾아보는 용도로 몇 번 검색했었다.

---

| 랜딩 페이지 레이아웃 분석

HTML

⊙ 랜딩 페이지 원본

네이버 지식백과의 랜딩 페이지는 메인 화면이다. 사업성이 없어 따로 소개 페이지가 있지 않다. 개별 지식을 검색했을 때는 각 표제어 항목으로 바로 들어가지고, 지식백과를 검색해서 들어왔을 때는 메인 화면이 바로 나온다. 캡쳐한 화면은 지식백과 서비스의 메인화면이다.

 

⊙ HTML 요소

내가 파악한 레이아웃은 이러하다. 상단에 헤더가 있고 내비게이션 바가 있다. 검색바는 내비게이션 바에 포함되는지 애매했고, 지식백과는 보통 웹사이트처럼 카테고리가 상단에 나열되어 있는 게 아니라 검색바 옆 '카테고리 보기' 버튼 안에 감춰져 있기 때문에 이 부분만 nav 처리하였다.
헤더 바로 아래에는 새로 업데이트 된 사전을 보여주는 부분이 있다. 한 화면에 아티클이 6~8개가 보이는데, 가로 스크롤(슬라이드)로 최대 20개까지 구성되어 있으므로, 제목 옆 좌우 화살표 버튼을 클릭하면 현재 아티클을 넘겨서 다른 사전을 볼 수 있다.
메인 섹션에는 아티클이 50개 정도 있지만 이미지에는 사이드바와 같은 위치에 뜨는 6개로 축약하여 표현했다. 스크롤을 내리면 보이는 순위 7부터는 사이드바 없이 메인 섹션의 아티클만 반복되어 나온다.
푸터에는 헤더 '카테고리 보기'를 클릭하면 나오는 주제 백과의 내용들이 나열되어 있다. 그외 저작권 표시, 운영원칙, 개인정보 처리방침, 오류 신고 등의 기능이 바로가기 형태로 늘려져있다.

⊙ 원본과 레이아웃 대조

 

---

| CSS와 JavaScript 요소

스타일 - 나눔고딕, 연두색
동작 - 탭 이동, 목차 펼쳐보기, 팝업 보기, 커서 애니메이션 등

⊙ CSS 요소

폰트: 네이버 자체 폰트인 '나눔고딕'과 돋움체
크기: 13px
디자인 테마 색상: 배경색은 네이버 대표 색상인 #00C73C 폰트색은 흰색으로 가독성을 살림

콘텐츠가 중요해서 아티클 크기가 일정함.

내가 화면 크기를 자체적으로 줄이고 확대해도 글자 크기는 안바뀌는데 대신에 패딩 안에 표시된 크기가 바뀐다. 나만 몰랐다면 안미안? 몰라서 한번 해봤다.

⊙ JavaScript 요소 - 단, 기능 중 '다른 페이지로 연결'은 제외

사전 서비스답게 하이퍼 텍스트 위주로 구성되어 있음, 다른 페이지로 연결이 대부분임.
그래도 상호작용이 되는 요소가 몇 개 있으니 뽑아보자.
기준: 새로고침 하지 않고도(서버한테 갱신된 화면을 요청하지 않고도) 바로 사용 가능.

1. 헤더의 nav인 카테고리 보기를 클릭하면 접혀있던 목차들이 펼쳐짐

버튼에 밝은 연두색 테두리가 생겼고 화살표 방향이 바뀌었다. 다시 클릭하면 접혀진다. ▲ 모양 또한 ▼로 바뀐다. 클릭하지 않고 커서만 두어도 화살표 방향이 바뀌고, 테두리가 생겼다가 없어진다.

2. (설명 일부가 미리보기로 나와있는) 표제어 아티클마다 사전 정보 옆에 달려있는 표정 아이콘을 누르면 팝업이 뜨면서 4가지 반응 중에 하나를 골라 입력할 수 있게 함.

신규 표제어 탭에는 반응과 조회수가 계산되지 않고, 반응을 바로 남길 수 없다. 반응을 남기려면 직접 클릭해서 맨 아래로 스크롤을 내린 다음 반응을 클릭하면 된다.
다시 한번 클릭하거나 또는 외부 영역 중 바로가기가 연결되지 않은 아무 곳을 클릭하면 팝업이 닫힌다.

mz세대니까 mz 세대 좋아요 누르기 ^^

반응을 클릭하면 아이콘과 합산수의 색깔이 바뀐다. 내가 클릭한 반응 수는 바로 1만큼 올라간다. 취소하려면 클릭한 반응을 한번 더 누르거나 다른 반응을 누르면 된다. 다른 반응을 누르면 이전에 눌렀던 반응이 자동 취소된다. 더 알고 싶어요 269, 담아갈게요 226 되어 있는 상황에서 담아갈게요를 누르면 227이 되고 더 알고 싶어요가 268가 된다는 뜻.

- 근데 이거 정말 오프라인 상태에도(실시간 갱신이 불가능할 때도) 적용되는지 모르겠다. 내 개인계정만 체크하는 게 아니라 전체적으로 합산해야 하는 건데. 아 내가 착각한 것 같은데 데이터베이스에 전달해야 되는지 아닌지가 중요한 게 아니고 단순한 웹브라우저를 어떻게 상호작용 시키는지가 자바스크립트가 구성하는 영역이니까 이것도 해당되는 거겠지?

3. 탭 이동, 안내 팝업 띄우기

메인 섹션에는 두 개의 탭이 있다. 인기순, 최신순 정렬.
기본적으로 인기순 정렬인 조회수 많은 표제어 탭이 화면에 보인다. 신규 표제어 탭을 누르면 메인 섹션의 아티클은 최신순 정렬 항목으로 변경된다. 이 과정에서 새로고침이 필요하지 않다. 미리 다운받은 요소를 숨김처리 하는 것 같다. 정렬을 변경한다기에는 워낙 표제어(항목)가 많아 같은 아티클의 순서를 바꾸는 건 아니기 때문에 숨김, 드러냄 처리로 추정하겠다.
정확히는 모르겠다... 정렬일까 숨김일까..

안내 팝업은 2번처럼 상호작용할 수 없다. 2번 팝업은 어딜 누르든 취소할 수 있지만 3번 팝업은 X 표시를 눌러야지만 팝업이 사라진다. 내용을 숙지해야 하는 종류인 안내 팝업이라 이런 차이점을 둔 것 같다.

그외 반응 요소

1. 업데이트 백과 양측 화살표 버튼을 누르면 슬라이드로 article 섹션이 이동됨. 총 20개
2. 조금만 아래로 클릭해도 나타나는 Home(바로 최상단으로 스크롤을 올려주는) 버튼
3. 아래로 스크롤하면 내용이 더 나타남 (이것도 자바 스크립트의 영역이긴 한가? 그냥 웹 브라우저가 긴 거 아닌가?)
4.  
5. 상단 섹션에서 최신 업데이트 된 백과(대분류, 부모 노드 같은 것)를 불러오고 메인 섹션에서는 최근 조회수가 많은 표제어(자식 노드 단위)와 신규로 등록된 표제어를 50개로 서열순으로 나열함. 이걸 계산한 서버에서 받아 정렬하는 기능. (근데 이것도 자바 스크립트의 영역이긴 한가? 그냥 데이터베이스가 준 순서를 UI 규칙에 따라 표시한 거 아닌가?)
6. 링크가 연결된 모든 텍스트에 커서를 갖다대면 밑줄이 그어짐. 표제어(게시글) 제목, 사전(카테고리), 탭 등. 푸터의 이용약관 안내 줄은 아예 초록색으로 강조 표시도 추가.
7. 5번과 비슷하게 헤더 아이콘에 커서를 대면 색깔이 바뀌며 선택했다는 표시를 줌. 꾹 누른듯한 느낌.

메일 정리 할 거임

 

사이드바 부분에는 기술할 내용이 없다.

• 표제어는 새로고침하면 데이터베이스에서 새로 정보를 받아서 갱신하는 것이라 클릭한다고 뭐가 없고
• 그 아래 함께 하는 전문가, 기관, 공지사항은 하이퍼텍스트로 해당 항목으로 이동하는 것이므로

 

---

| 개발자 도구로 확인하기

임의로 분류한 레이아웃이 개발자 도구로 살펴보니까 틀린 게 많았음. html를 제대로 알아야 할 필요가 있음.
자바 스크립트로 구현했을 거라 생각한 기능이 툴팁 클래스 등 다르게 표시된 경우가 많았음. 자바 스크립트와 클래스의 구분이나 관계를 공부할 필요가 있음.

⊙ 내가 파악한 게 맞는가? 개발자 도구로 확인해보자.

헤더부터 틀렸다.

Nav를 category만 해당된다고 표시해놨는데, 실제로는 검색바까지 포함하고 있었다.

그리고 보면 헤더 부분이 body 안에 들어가 있는데, 그럼 head는 뭐란 말인가? 여기서는 생략되어 있는가? 하위 서비스인 사전에만 해당되는 게 아니고 전체적으로 공유하는 상단 부분인가? 저번에 배운 적 있었던 거 같은데 모르겠다. 이 부분 공부가 필요하다.

일단 헤드는 이런 내용으로 구성되어 있는데 현재 내 시점에서는 읽어낼 게 거의 없다.


그리고 섹션이라고 표기했던 부분은 메인 스폿 영역으로 표기되어 있다.

이렇게 되어있는 걸 보면 제목과 화살표 버튼이 타이틀, 그 아래 아티클 부분이 메인 리스트로 구분됨을 알 수 있다. 좌우 버튼은 자바스크립트로 구성되어있다. 클래스명이 prev disabled인 건 조금 주목할만한 것 같다.

그 아래 영역은 이렇게 되어있는데, (mask가 감싸준다는 건가? 배웠던거 같은데 모르겠다. span이 감싸주는 거고 mask가 자리 내는 건가? 아니겠지.) 여기서 주목할 점은 사전 이미지 미리보기가 왼쪽 큰 사진 1개, 오른쪽 작은 사진 2개로 되어있는데 이 크기가 고정되어 있어서 그렇다는 것 그리고 이미지는 사전에서 링크로 불러와서 썸네일을 삼는다는 것이며 또 하나는 리스트가 액티브 클래스로 변경된다는 점이다. 대충 변경된다는 건 알겠는데 정확한 원리는 잘 모르겠다.


그 아래 메인 섹션이라고 추측한 부분은 컨텐츠라고 구분되어있다.

정신이 혼란스러워진다. 컨텐츠, 컨테이너, 섹션, 메인 섹션, 메인 스폿 에어리어 등은 정해진 문법일까 서비스마다 임의로 다른 이름을 붙일 수 있는 걸까? 정확한 html 구조는 뭘까? 클래스 블라인드는 무슨 의미일까?

충격... 내가 자바 스크립트로 구현했을 거라 생각한 탭 이동이 sort item class 였다. 이것은 html인가?
그리고 자바 스크립트로 팝업을 띄우는 거라고 생각했던 것이 툴팁 클래스였다. 툴팁 클래스면 html인가?

기본적으로 선택된 클래스에는 셀렉티드가 붙고 클릭하면 이 탭을 띄우는 것 같다.
툴팁에는 클래스로 안내 아이콘을 표현하고, 커서를 대면 어떤 아이콘인지 설명하는 텍스트(안내 레이어 보기)를 띄운다. 클릭하면 툴팁 레이어를 연다.

aside로 추측한 부분은 맞았다.

근데 난 섹션 정의를 잘못 알았는지도 모르겠다.

표제어 통계, 함께하는 전문가 등 사이드에 해당하는 항목이 다 섹션으로 표시되어 있다. 나는 각각 사이드라고 적어놨는데!

표정 반응 추가하는 건 자바스크립트로 구현한 게 맞았다.

⊙ 상술했던 내용 중에 실제로 자바 스크립트가 쓰인 기능

cirl + F 눌러서 java 검색하여 둘러보는 게 자바스크립트가 쓰인 기능이 뭔지 찾을 때 정확한 방법인 듯 하다.
자바 스크립트라는 텍스트가 적힌 태그만 자바 스크립트로 구현되었다고 치겠다.

자바 스크립트 맞음: ◎ / 아닌 거 같음 × / 확인 안했음 ◈

1. 목차들이 펼쳐짐: ◈
2. 표정 아이콘: ◎ 
3. 탭 이동: ×
4. 안내 팝업 띄우기: ×
5. 버튼 누르면 슬라이드: ◎
6. 그외 반응 요소: ◈
   
   1. Home 버튼
   2. 스크롤 로딩
   3. 아티클 정렬 
   4. 하이퍼 텍스트에 커서를 두면 밑줄
   5. 아이콘에 커서를 대면 색깔이 바뀜 

툴팁 클래스가 자바 스크립트인가 아닌가가 문제다.

---

여담

사진 왜 안 올라가나 했더니 용량이 커서였다. 네이버 블로그는 사진 올릴 때(예전 에디터 기준으로) 크기를 바로 조정할 수 있었는데 티스토리 어디까지 불편할 셈인데? 네트워크 타령하지 말고 사진 용량이 너무 커서 못올린다고 말해주셨으면 내가 다른 방법을 찾을 거 아닙니까 황당합니다
아니 근데 내가 사진을 10000px로 만들고 있었는지 몰랐어 허허

아니 근데 정말 12시 되기 전에 필수 제출할 사진 다 만들고, 필수적인 내용은 적었어. 제출했다고 배쨀 정도는 했는데 12시 후에 서식 정리하면서 내용을 보충했을 뿐... 이런 상황이면 양심이 해쳐 아니면 양심 지켜? 양심 고백해 말아? 알아서 처리해주시길 기다려야 하나? 양심이 뚫어뻥한테 애저녁에 당한 죄로 단죄하신다면 달게 받겠소...

내용 정리 끝;;

기회 되면 제대로 퍼블리싱 배우고 싶다. 티스토리 스킨 내 취향으로 바꾸고 싶다. 이상하게 화면 바꾸고 낄낄대고 싶다. 내 생각에 나는 개발보다 퍼블리싱 쪽을 더 재밌어할 거 같다. 둘다 혀 낼름 정도는 해본 상황에서 판단컨대 마크업 문법은 개발 문법보다 쉬운 거 같다.


가로 스크롤과 슬라이드 차이?

1. 아래로 스크롤하면 내용이 더 나타남 (이것도 자바 스크립트의 영역이긴 한가? 그냥 웹 브라우저가 긴 거 아닌가?)
2.  
3. 상단 섹션에서 최신 업데이트 된 백과(대분류, 부모 노드 같은 것)를 불러오고 메인 섹션에서는 최근 조회수가 많은 표제어(자식 노드 단위)와 신규로 등록된 표제어를 50개로 서열순으로 나열함. 이걸 계산한 서버에서 받아 정렬하는 기능. (근데 이것도 자바 스크립트의 영역이긴 한가? 그냥 데이터베이스가 준 순서를 UI로 표시한 거 아닌가?)
4. 커서를 대면 화살표 바가 손 모양으로 바뀌는 거 자바스크립트 기능은 당연히 아니지?? 그럼 뭐임?

CSS랑 자바 스크립트 어떻게 적어야 하는거지?
특히 CSS 뭘 적어야 하냔 말이다~

저번에 한 건 네이버 국어사전이었으니 이걸 해도 괜찮다. 보입니까 네이버? 국내 서비스를 향한 나의 사랑이? 이 애국심이?? 빨리 표창장 안주고 뭐해??

해당 서비스의 기능적 요소를 JavaScript와 연관지어 분석하였는가?
실제 서비스와 프론트엔드 코드의 관계에 대해 생각해 볼 점들을 정리하였는가?
루브릭에 이 두 개는 어케 해야 하는지 모르겠다. 기능을 자바스크립트랑 연관지어?? 하지만 연관짓기에는 자바스크립트에 대해 잘 몰라... 저번에 개발자 언니의 입김에 녹으면서 문법 배운 적 있었는데 몇개월이 지난 지금에 와서는 Var 함축식 변수 선언 let 변할 수 잇는 변수 선언 const 안변하고 고정된 변수 선언 이 정도만 대충 기억나서 이게 맞는지 아닌지 확인해야 하는 단계다... 그래서 기능 잘 몰라!
실제 서비스와 프론트엔드 코드의 관계에 대해 생각해 볼 점들을 정리...하라고? 그걸 어떻게 해요 모르는 걸 알아내라는 뜻인가? 모르는건 수두룩하게 알아낼 수 있지만 고찰거리는 못 던지는데!!

자바 스크립트로 툴팁 클래스 만든 게 아니라면 이건 뭐로 만든겨 아무래도 자바스크립트로 만든 거 아닌가 그게 유일한 웹 언어인데 하지만 표기되지 않았다는 건 아니라는 뜻?

HTML 구조에 대해 이미지 더 많이 보고 더 제대로 공부할 피룡가 있겠다.

---

분석 참고 글

https://interrupt.tistory.com/6

HTML5 시멘틱 구조 및 여러 태그

 

---

W7D1 [코드스테이츠 PMB 16기] 과제
프론트엔드 언어