Causation

우선 현재 생각한 네이버 화면

그런데 최소 로그인, 메일 등 네이버 주요 기능으로 접속할 수 있는 경로들은 남겨두어야 될 것 같다고 판단.

화면에 표시할 요소들

• 네이버 로고
• 검색 화면
• 네이버 메일
• 주요 네이버 기능 접속 요소들
• 로그인 관련 요소들

SimpleNaver 화면 구성

우선 전체적인 느낌은 이렇게 갈 것 같다.
(구글에는 검색 순위가 없지만, 네이버는 있는게 좋을까? 우선 요건 이따 확인해봐야겠다.)

주요기능 UI

주요기능은 구글의 위 화면처럼 구성시켜봐야겠다.

오늘 이어서 작업을 하려고 접속했더니 아래 화면처럼 나타나 있었다.

평소 네이버 자체에서 특정 기념일 등이 있을 때, 이에 알맞는 로고를 이용하기 위해 태그의 아이디를 다른 것을 쓰나보다... (오 마이 갓...)

네이버에서 로고 아이디를 변경해도 사용할 수 있는 방법을 찾아야 할 것 같다...

현재 검색 화면

변경할 사항 정리

• 상단 검색 창 부분 둥글게 작업
• 오른쪽 영역 뉴스 토픽, 실시간 검색어 삭제
• 각 검색 결과 영역과 글씨 크기를 더 크기 조절해보기
• 광고 영역 없애기

네이버 메인 페이지 DOM을 파보면서 발견한 내용들을 정리

네이버에서 사용되는 메인 페이지의 이미지는 단 하나이다.

이런 것을 발견했다.

네이버 로고를 크게 만들려고 width,height를 늘렸는데, 로고가 늘어가는 것이 아니라, 숨어있던 다른 이미지들이 불쑥 나타나는 것이다.

처음에 보고 깜짝 놀랐다....

근데 보니까 왠지...이 이미지들 지금 여기 메인 페이지에서 사용되고 있는 모든 이미지 같다..

설마... 혹시 몰라서 다른 이미지 녀석들도 까보았다..

전부 하나의 이미지였고, 해당 이미지는 바로 아래와 같다.

https://s.pstatic.net/static/www/img/uit/2020/sp_main_b46ce0.png

네이버 메인 페이지는 이미지 리소스와, 이미지를 요청하는 네트워크 성능을 최소로 하기위해 하나의 이미지만 요청하여 다 같이 쓰고 있었던 것이다..

크로미움 에러인 것 같은 요소 발견

비동기적적으로 세팅한 DOM 요소를 javascript에서 바로 가져올 수 없음

1. 개발자 모드에서 비동기로 가져온 DOM 요소를 가져와본다.

그러면 없는 것으로 나온다.
그런데 비동기로 가져온 DOM을 개발자 도구로 한번 찍고 다시 가져와보면 해당 DOM이 가져와진다.

이것은 네이버가 아니라 크로미움 엔진 문제인 것 같다.

테스트 해본 내용

• 비동기 DOM 요소를 전부 세팅 후 가져와보기 위해, setTimeout으로 가져오는 것을 시도 : 못 가져옴
• 제대로 가져와질때까지 무한루프를 돌려봄 : 못 가져옴

비동기 처리 된 DOM 요소를 사용하기 위한 처리 방식

• 해당 DOM을 감싸고 있는, 가져올 수 있는 DOM 요소를 가져와서, 내가 배치하려 하는 곳으로 배치 후, 안 쓰는 자식 DOM을 전부 지우는 방식으로 한다.

Causation

각자 페이지 별로 CSS 스타일이 따로 적용이 되어야 하는데, CSS 작업한 파일 내용들이 모든 페이지에 전부 적용이 되어버리는 문제.

현재 페이지 별 코드 관리 및 적용을 달리 구분하려고 메인 화면과 검색결과 화면에 대한 js,css 파일을 구분해 놨는데, menifast를 통해 적용하면, 전체 페이지 대상으로 적용이 되어버려서 스타일이 엉망이 되어버리는 문제가 발생한다.

Suggestion

1. 각 페이지 별 최상단 부모의 ID나 Class를 이용해서 각 페이지 별 Style의 선택자를 둔다.
2. 크롬 익스텐션에서 각 파일 별로 주소마다 따로 적용할 수 있는 방법이 있는지 찾아본다.
3. 또 다른 방안을 생각해본다...