구글 키워드 검색 웹서비스 제작 (1편)

1. 배경

티스토리 TIL을 쓰면서

노출은 되지만

내가 해결하려는 문제가 수요가 있는지

파악하는 것이 어려웠다.

 

일일이 구글 트렌드에 접속해서

검색량을 아는 것도 귀찮고

기존에 나와있는 서비스를 이용하려니

대부분 네이버 분석만 하고 있거나

구글은 유료였다..

 

아무래도 셀러들을 위한 서비스라

네이버 스마트스토어 업자들을 타겟해서

구글은 잘 지원하지 않는 것 같았다.

 

심심풀이로 만들어보자니

내 실력에 비해

너무 큰 프로젝트(?) 같지만

도전해보기로 했다!

 

 

2. 구상

먼저 환경은 리액트로 설정하여

각 컴포넌트 별로 정보를 새로고침 할 수 있게끔 설정할 것이다.

 

왜냐면 분석 그래프나 통계 자료 등이

변경되거나 필터링이 될 수 있는데

그 때마다 HTML 페이지 전체가 로딩된다면

매우 깜빡거릴 것 같기 때문이다.

 

하지만 SEO를 고려해서

메인페이지 정보만 검색에 노출될 수 있도록

구성해봐야겠다.

 

 

 

벤치마킹 페이지는 모두

메인페이지 상단에

Navbar와 Input이 공통적으로 있었다.

 

그 아래에는 각 사마다

보여주는 정보가 달랐다.

 

우선 나는 다양한 정보를 제공할 수 없을 뿐더러

핵심 기능만 동작하는 것도 버거우므로..

Navbar를 통해 나눌 필요가 없다.

 

중요한 건 input에

클라이언트가 키워드를 넣었을 때

해당 키워드가

'구글' 에서 '수요가 있는' 키워드 인지

알아내는 것이 이 서비스의 목적이다.

 

 

const StSection = styled.section`
width: 100vw;
height: 100vh;

display: flex;
align-items: center;
justify-content: center;
flex-direction: column;

background-color: #763c3c;

margin-bottom: 20px;

`

const StLabel = styled.label`
position: absolute;
top: 20%;

color : white;
font-size: 6vw;
font-weight: bold;
`

const StInput = styled.input`
position: absolute;
bottom: 40%;

width: 40vw;
height: 4vh;
`

 

 

vw와 vh를 사용해

반응형으로 레이아웃만 잡아보았다

 

다음에 input 키워드가 들어갔을 때

페이지 넘어가는 것 까지 해봐야겠다.