02-도메인 등록 및 웹 분석 도구

1. 도메인이란?

1https://www.google.com/search?q=google
2
3https:// ======> 프로토콜
4www      ======> 서브도메인
5google   ======> 도메인
6.com     ======> 최상위 도메인
7search.  ======> 경로
8q=google ======> 쿼리스트링

도메인 (Domain): 도메인은 웹 사이트나 웹 애플리케이션을 식별하기 위한 주소
- 문자열로 표현되며, 실제로는 컴퓨터나 서버의 IP 주소와 연결
- e.g. search.naver.com는 도메인 주소 / naver.com 도메인 이름 / search 서브도메인
서브 도메인 (Subdomain): 도메인의 하위 레벨 주소. 웹 사이트의 특정 섹션이나 서비스를 식별하는 데 사용
DNS (Domain Name System): 도메인 이름을 IP 주소로 해석하거나, IP 주소를 도메인 이름으로 변환하는 역 할을 하는 분산 데이터베이스 시스템. DNS를 사용해서 도메인 이름을 실제 서버 IP 주소로 매핑
네임 서버 (Name Server): DNS 정보를 저장하고 관리하는 서버
- 도메인 이름을 IP 주소로 해석할 때, Name Server가 필요한 정보를 제공
CNAME 레코드 (Canonical Name): CNAME 레코드는 도메인 이름을 다른 도메인 이름으로 매핑할 때 사용됨
- 이를 통해 한 도메인을 다른 도메인으로 리디렉션
A 레코드 (Address): A 레코드는 도메인 이름을 IP 주소로 매핑할 때 사용됨
- e.g. “example.com”을 실제 웹 서버의 IP 주소로 연결할 때, A 레코드를 사용
즉, 도메인은 웹에서 중요한 주소로, 서브도메인과 함께 웹 사이트를 식별하는 데 사용 됨

1.1 도메인 계층 구조

cf. 한국인터넷진흥원: https://www.kisa.or.kr/1041104

(1단계) 최상위 도메인 (Top-Level Domain): 도메인 이름의 가장 높은 수준
- e.g.) .com, .org, .net
2단계 도메인 (Second-Level Domain): 1 단계 도메인 하위에 위치하며, 특정 조직/회사/ 브랜드/서비스를 식별하는데 사용
- e.g.) example.com에서 “example”
3단계 도메인 (= Subdomain): 더 구체적인 주소 또는 서브 사이트
- e.g.) blog.example.com

1.2 도메인을 사용하는 이유?

기억 및 접근 용이성: 도메인은 사람이 쉽게 기억하고 사용할 수 있는 문자열로 웹 리소스를 식별하는 데 도 움이 됨.
- (e.g. “www.example.com”은 “93.184.216.34”라는 IP 주소보다 기억하기 쉬움)
유연성: 도메인은 IP 주소와 다르게 리소스의 물리적인 위치나 변경 여부와 상관없이 유지될 수 있음
다중 호스팅: 하나의 도메인 이름 아래에 여러 웹 리소스 (웹 페이지, 이미지, 동영상 등)를 호스팅할 수 있음
- IP 주소만 사용할 경우, 각 리소스마다 다른 IP 주소를 기억하고 사용해야 하므로 복잡성이 증가
브랜드 식별: 브랜드의 이름 또는 식별 요소를 도메인에 포함시키면 사용자가 해당 브랜드와 연결되기 쉬움
SEO: 의미 있는 도메인 이름을 선택하고, 키워드를 포함하는 도메인을 사용하면 검색 엔진에서 높은 순위 를 얻을 수 있음

2. GoDaddy란?

GoDaddy: 미국의 대표적인 도메인 등록 업체 및 웹 호스팅 서비스 제공 업체 중 하나.
- 웹 호스팅, 도메인 등록, 웹 사이트 제작 도구, SSL 인증서 등 다양한 웹 기반 서비스를 제공
도메인 등록: 다양한 도메인 확장자(예: .com, .net, .org)를 통해 도메인 등록을 제공
웹 호스팅: 공유 호스팅, 전용 서버, 클라우드 호스팅 등 다양한 호스팅 옵션이 제공
웹 사이트 빌더: 사용자가 쉽게 웹 사이트를 제작하고 관리할 수 있도록 도와주는 웹 사이트 빌더 도구를 제공
SSL 인증서: 사이트 보안을 강화하기 위한 SSL(Secure Sockets Layer) 인증서를 제공
이메일 호스팅: 사용자 정의 이메일 도메인을 생성하고 이메일 호스팅을 제공하여 전문적인 비즈니스 이메일을 설정

2.1 GoDaddy 도메인 용어 설명

GoDaddy에서 도메인을 설정할 때 DNS 관리를 누르면 아래와 같은 페이지를 볼 수 있음:
DNS: IP 주소를 사용자가 기억하기 쉬운 도메인 이름(예: www.example.com)으로 변환해주는 시스템
A 레코드(Address Record): 도메인 이름을 해당 도메인의 IP 주소로 연결해주는 설정
NS 레코드(Name Server Record): 특정 도메인을 관리하는 이름 서버를 지정
CNAME 레코드(Canonical Name Record): 도메인의 별칭 을 설정하는 데 사용
SOA 레코드(Start of Authority): DNS에서 특정 도메인을 관리하는 주요 서버를 식별하고 해당 도메인의 기본 설정을 제어 하기 위한 정보 제공
TTL(Time to Live): DNS 레코드가 캐시된 정보를 얼마나 오 래 사용할지를 결정하는 시간

2.2 GoDaddy에서 도메인 구매 & 연결하기

GoDaddy에서 도메인 구매
Vercel에서 구매한 도메인으로 설정
- Vercel > View Domains > 도메인 입력 후 Add
- 설정이 잘못 되었다는 에러가 나오면, GoDaddy에서 추가설정
Godaddy > 나의 비즈니스 > 도메인 > 도메인 설정> DNS
- Vercel이 제공하는 DNS 레코드 (CNAME 레코드 또는 A 레코드)를 Godaddy의 DNS 설정에 추가
- Godaddy 기존에 있던 A 레코드는 지우고 진행(A @ Parked 레코드 삭제)
도메인 포트폴리오 > 도메인 잠금 끄기
- 이후, 네임서버를 Vercel에서 제공하는 네임서버로 변경

2.3 GoDaddy 가격 및 자동 갱신 주의사

GoDaddy에서 사용하는 도메인은 유료입니다 (도메인에 따라 가격 천차만별)
vercel에서 제공하는 무료 도메인을 유지하고 싶다면, 별도로 Godaddy 혹은 타 도메인 사이트에서 구매 X
1년만 사용하고 싶으시다면, ‘자동 갱신’을 OFF 로 설정해야 합니다. (다음 해에 더 비싼 가격으로 청구될 수 있음)

3. Google Analytics

Google Analytics: 웹 사이트 및 앱의 트래픽 및 사용자 행동을 분석하는 데 사용되는 Google의 무료 웹 분석 도구
- cf. https://analytics.google.com/
추적 코드 설치: Google Analytics를 사용하기 위해서는 해당 웹 사이트 또는 앱에 추적 코드를 설치
데이터 수집: 사용자의 활동을 추적하고 이벤트, 페이지 뷰, 컨버전 등 다양한 데이터를 수집
보고서 및 대시보드: 수집한 데이터를 기반으로 다양한 보고서와 대시보드를 생성
- 이를 통해 트래픽, 사용자 행동, 컨버전률 등을 시각적으로 확인
사용자 분석: 사용자 그룹을 세분화하고 사용자의 특성, 관심사, 동작 등을 분석할 수 있음

3.1 왜 사용하는가

무료: Google Analytics는 기본 기능을 무료로 제공하며, 대부분의 웹 사이트나 앱에 적용하기 쉬움
상세한 분석: 트래픽 소스, 사용자 경로, 컨버전률 등을 상세하게 분석할 수 있어 웹 사이트나 앱의 성능 향상 에 도움을 줌
사용자 이해도 향상: 사용자가 웹 사이트나 앱에서 어떻게 상호 작용하는지 이해할 수 있으므로 사용자 경험을 개선하는 데 도움을 줌
트래픽 분석: 웹 사이트나 앱에 어떤 트래픽 소스에서 사용자가 유입되는지 추적
페이지 분석: 어떤 페이지나 화면이 사용자에게 가장 많이 방문되는지, 어떤 컨텐츠가 인기 있는지를 파악
컨버전 분석: 원하는 동작(예: 구매, 가입, 다운로드)을 완료한 사용자의 비율을 계산하고 개선 방법을 고려

Google Analytics Console 예시

cf. https://analytics.google.com/analytics/web/#/

3.2 구글 애널리틱스 설정

https://analytics.google.com/ 에서 하단 설정(관리) 클릭 > 계정 만들기 & 속성 만들기
속성 및 비즈니스 정보 설정 > 플랫폼 ‘웹’ 선택
웹 스트림 설정 > 웹 사이트 URL 및 스트림 이름 입력 > 스트림 만들기
아래와 같은 화면이 나오면 설정 완료. 측정 ID를 복사해서 Next.js 프로젝트에 환경변수로 저장

3.3 Next.js 프로젝트 설정

@types/gtag.js dev dependency로 설치 (https://www.npmjs.com/package/@types/gtag.js)
1. yarn add -D @types/gtag.js
2. tsconfig.json에 gtag 추가해서 타입 선언 파일 지정 ("types": [“@types/gtag.js”])
이전 페이지에서 저장한 측정 ID를 환경변수 (.env) 파일에 저장
1. NEXT_PUBLIC_GA_ID=G-XXXXXXX
utils/gtag.ts 파일을 만들어서 구글 애널리틱스 관련 타입 및 함수 정의
- event 함수로 특정 행동을 했을 때, 원하는 이벤트 기록 수집하기
app/googleAnalytics.tsx 파일을 만들어서 구글 스크립트 로드
app/providers.tsx에서 앞서 만든 googleAnalytics 컴포넌트 로드

src/lib/gtag.ts 파일 예시

googleAnalytics.tsx 파일 예시

해당 코드를 RootLayout (Providers.tsx 파일) 에 import해서 적용하기
NODE_ENV가 production인 경우에만 추적하도 록 예외처리

event 함수 예시

event 함수를 사용해서 특정 조건의 사용자 행동 이벤트를 수집함
예시: 사용자가 좋아요 버튼을 누를 때, 결 과에 따라 액션 이름 (click_like), 카테고리 (like), 라벨 (create_like, delete_like, need_login_like) 를 다르게 해서 이벤트 전송

next.js 공식 문서 참고 (third-party libs)

@next/third-parties/google를 사용해서 간단하게 구현하는 방법도 있음
cf. https://nextjs.org/docs/app/building-your-application/optimizing/third-party-libraries#google-analytics

배포 후 설정

환경변수(NEXT_PUBLIC_GA_ID) 추가 후 재배포
데이터 수집 될 때까지 기다리기: https://analytics.google.com/analytics/web

4. 네이버 서치 어드바이저

네이버 서치 어드바이저:

(공식) 네이버 서치어드바이저(웹마스터도구)는 본인이 운영하는 사이트의 검색 반영 및 제외를 위해 검색 반영 현황을 모니터링하고 관리할 수 있도록 제공하는 서비스
(공식) 사이트가 어떻게 검색에 반영되는지 확인할 수 있어 사이트 운영에 많은 도움이 될 수 있음
네이버 검색 서비스에 등록된 웹사이트를 검색 결과에 노출시키기 위한 플랫폼
네이버 서치 어드바이저를 통해 웹사이트를 등록하고 최적화할 수 있음

4.1 사이트 등록

웹 마스터 도구 > 사이트 관리에서 사이트 추가
- cf. https://searchadvisor.naver.com/console/board.
사이트 추가 후, 소유 확인 진행하기
- 사이트 루트 폴더에 HTML 파일을 업로드
사이트 소유 확인하기:
- 네이버 서치 어드바이저의 ‘사이트 소유확인’ > HTML 파일 업로드 선택 후, 해당 파일 다운로드
- Next.js 프로젝트 public 폴더에 해당 파일 추가
- vercel에 Next.js 프로젝트 배포 후 소유확인 버튼 클릭
사이트 URL 수집 요청하기: 검색창에 사이트 주소(URL)를 입력하면 노출 여부를 확인할 수 있음

5. Google Search Console

Google Search Console: 구글 검색 엔진에서 웹사이트를 관리하고 최적화하기 위한 무료 도구
웹 사이트의 검색 결과에 대한 정보를 확인하고, 검색 엔진 최적화(SEO)를 위한 중요한 데이터를 얻을 수 있음 Google Search Console에 사이트 등록하기
(공식) Search Console 도구와 보고서를 사용하면 사이트의 검색 트래픽 및 실적을 측정하고, 문제를 해결하며, Google 검색결과에서 사이트가 돋보이게 할 수 있음

5.1 사이트 등록

Google Search Console 접속 > 사이트(속성) 추가 > URL 접두어 입력
- 링크: https://search.google.com/search-console
소유권 확인하기 > HTML 파일 다운로드
- Next.js 프로젝트 루트 (public) 폴더에 해당 HTML 파일 추가 후, Vercel 배포
소유권 확인 완료 후 Search Console 대시보드에서 검색 트래픽, 색인 상태, 검색어 분석 등 데이터 확인

01-배포 방법