오늘은 무엇을 배웠는가
- 인터넷 구성 및 동작 방식
- 인터넷: 컴퓨터들이 서로 통신 가능한 거대한 네트워크로 구성된 것.
- 네트워크: 컴퓨터 및 다른 장치들 간에 데이터를 교환할 수 있는 인프라.
- 네트워크에 연결된 모든 컴퓨터에는 IP(Internet Protocol)주소라는 고유한 주소가 있음. 주소는 점으로 구분된 네 개의 숫자로 구성된 주소(TCP/IP) (ex. 192.168.2.10 / 115.143.112.198)
- 그러나 숫자보다는 문자로 더 많이 사용됨(DNS-Domain Name System에 의해)
- 인터넷과 스마트폰의 발달과 IP의 부족으로 인해 기존에 사용되던 IPv4(최대 40억 개)뿐만 아니라 IPv6(최대 340조 개)도 사용됨.
- 웹이란?
- 웹은 다양한 네트워크 프로토콜 중에 가장 많이 쓰이고, 편리한 서비스.
- DNS(Domain Name System): IP주소 숫자를 문자로, 문자를 숫자로 변경해주는 것. 도메인은 같은 문자로 끝나는 인터넷상의 웹 사이트 집합. '도메인네임.국가' 같은 방식.
- HTTP(Hyper Text Transfer Protocol): 클라이언트 서버 구조(클라이언트가 요청 시 서버가 제공해줌), 비연결성, 상태 저장이 안 됨(무상태 프로토콜, Stateless) (Hypertext: 다른 문서로 바로 이동)
- 핸드폰은 상태를 저장해야 하는 관계로 기지국 건설 비용이 높음. HTTP는 상태 저장을 안 하므로 설치 비용이 저렴함.
- 상태 저장을 하지 않아 클라이언트를 기억하지 못함. 이로 인해 클라이언트가 추가로 데이터를 전송해야 함. 이 문제를 극복하기 위해 Cookie와 Session이 탄생. Cookie는 클라이언트에게 저장, Session은 서버에서 관리. 둘이 혼용됨.
- HTTP를 사용하기 위해서는 HTTP를 서비스하는 서버를 찾아야 하는데, 네트워크는 숫자로 되어 있기 때문에 기억하기 힘들어 DNS를 이용. 사용자는 문자로 입력, 내부적으로는 숫자로 사용.
- HTTP(Hyper Text Transfer Protocol): HTML(Hyper Text Markup Language), 이미디, 오디오, 비디오 등을 웹 브라우저에서 가져 올 수 있게 하는 통신 규칙. (Markup Language: <tag> 이런 식으로 되어 있는 언어)
- 현재는 거의 많은 응용프로그램들이 웹브라우저 환경의 HTTP 프로토콜을 사용. 웹브라우저는 HTML(화면 레이아웃 구성)/CSS(화면 디자인 조정)/JavaScript(웹사이트에서의 모든 것)만 Interpreting이 가능.
- 웹 변천사
- 1990년 최초의 웹이 세상에 등장한 이후로 현재까지 Web은 특별한 개념을 가지고 구분함.
- WEB1.0: 1990년~약 2004년
- Static read-only webpages. 요청하고 주기만 할 뿐인 일방향적 관계.
- 디렉터리 기반. 읽기 전용. 정적인 텍스트. 기업. PC. HTML, Active X.
- WEB2.0: 약 2004년 ~현재
- Informarion-centric and interactive. 쌍방향적으로 주고 받을 수 있음. 사용자 생성 콘텐츠(UGC)의 부흥.
- 메인 키워드: 참여, 공유, 개방.
- 양방향 소통 중심. 읽기-쓰기. 인터랙티브 콘텐츠. 플랫폼. 클라우드 및 모바일. A/AX, XML, RSS, Tagging 등.
- WEB3.0: 약 2020년~현재 (개념 정립 중)
- User-centric, decentralized, private, and secure.
- 지능화, 개인화. 읽기-쓰기-소유. 가상 경제. 네트워크. 블록체인 클라우드. 블록체인, 메타버스.
- UI/UX란?
- UI(User Interface): 사용자와 컴퓨터 간의 인터페이스. 시각 디자인, 브랜딩, 선호도, 레이아웃, 목업.
- UX(User eXperience): 사용자가 서비스를 사용하는 동안 느끼는 경험. 인터랙션 디자인, 유저 리서치, 사용성, 네비게이션, 시나리오.
- UI/UX는 서로 추구하는 목적이 다름. UI는 보이는 것에 목적을 둔다면 UX는 사용자 만족도 등을 목적으로 둠.
- 주로 기획자(PM)이 주도로 디자이너, 개발자와 협업함. 화면 해상도에 맞게 변경되는 반응형 웹도 고려할 것.
- 누구나, 어떤 환경에서나 검색할 수 있도록 웹 호환성과 웹 접근성을 지닌 '웹표준'을 준수할 의무가 있음.
- 비장애인뿐만 아니라 장애인의 특수성도 고려할 것.
- SEO(Search Engine Optimization)란?
- 구글/네이버와 같은 검색엔진에 친화적인 사이트를 구축하여 광고가 아닌 자연 검색 결과를 통해 트래픽의 양과 질을 극대화하는 작업.
- 크롤링(Crawling): 콘텐츠 수집하기.
- 색인(Indexing): 콘텐츠 저장 및 관리하기.
- 랭킹(Ranking): 콘텐츠 순위 매기기.
- SERP(Search Engine Result Page)에는 Paid Search Result(광고 검색 결과)와 Organic Search Result(자연 검색 결과)가 있음. 광고 비용 절감을 위해 SEO를 잘 고려해야 함.
- 구글은 전세계 검색시장 90% 점유, 한국에서는 2023년 11월 네이버 약 57%, 구글 30%, 다음 5% / 2022년 네이버 약 63%, 구글 29%, 다음 4% 순(인터넷 트렌드) > 일반적으로 매스 마케팅이 진행될 수밖에 없음.
- UI/UX(사용자 기준)와 SEO(브라우저 기준) 관계
- 검색엔진은 진화하고 있으며, 사용자 경험에 중점을 두고 있음. 양질의 UI/UX를 갖춘 사이트가 더 높은 순위를 차지할 가능성이 높음.
- UX/UI를 통해 SEO를 개선하는 방법
- 사용자의 검색 의도에 맞는 디자인
- 사용자의 방문 목적 파악
- 특정 검색어에 응답
- 페이지 속도 향상
- 이미지 최적화
- 서버 응답 시간 확인
- 모바일 사용자 고려
- 탐색하기 쉬운 사이트 제작
- 탐색 메뉴
- 정리된 페이지
- 모바일 친화적인 사이트 제작
- 화면 크기
- 텍스트 크기
- 사용자의 검색 의도에 맞는 디자인
- WEB 개발 기초(html 구조)
- 웹은 크게 Front-End(화면), Back-End(비지니스 로직/DB)로 나눠지며, SEO를 적용하기 위해서는 Front-End 부분인 브라우저에서 동작하는 HTML/CSS/JS의 기초적인 내용을 알아야 함.
- <!DOCTYPE>: 현재 문서가 HTML 문서 타입임을 명시. (HTML5 문서 타입은 <!DOCTYPE html>)
- <html>: HTML 문서의 루트(root) 요소를 정의.
- <head>: HTML 문서의 메타데이터(metadata)를 정의. 웹이 확인.
- 메타데이터(metadata): HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보.
- 이러한 메타데이터는 <title>, <style>, <meta>, <link>, <script>, <base> 태그 등을 이용하여 표현할 수 있음.
- <title>: HTML 문서의 제목(title)을 정의, 다음과 같은 용도로 사용.
- 웹 브라우저의 툴바(toolbar)에 표시됨.
- 웹 브라우저의 즐겨찾기(favorites)에 추가할 때 즐겨찾기의 제목이 됨.
- 검색 엔진의 결과 페이지에 제목으로 표시됨.
- <body>: 웹 브라우저를 통해 보이는 내용(content) 부분. 사람이 확인.
- <h1>~<h6>: 제목(heading)을 나타냄.
- <p>: 단락(paragraph)을 나타냄.
- 현재 html은 버전이 5로, 2014년경에 시작됨.
- WEB 개발 기초(html5 구조)
- WEB 개발 기초(SEO 설정 위치)
- Title 태그: 웹 페이지의 제목을 정확하고 명확하게 제공. 검색 결과에서 사용자가 볼 수 있는 가장 중요한 요소 중 하나.
- Meta Description: 페이지의 내용을 요약하는 짧은 설명을 제공. 이 설명은 검색 결과에서 페이지 아래에 표시, 클릭을 유도하는 데 중요한 역할.
- Meta Keywords: 과거에는 페이지의 내용과 관련된 키워드를 나열하는 데 사용되었으나, 현재는 대부분의 검색 엔진에서 이를 무시. 그럼에도 불구하고 일부 개발자들은 내용의 명확성을 위해 여전히 사용하기도 함.
- Canonical 태그: 웹 페이지의 기본 버전을 지정하여 중복 콘텐츠 문제를 방지.
- Heading 태그(H1, H2, H3 등): 콘텐츠의 구조를 정의하고 중요한 제목과 부제목을 강조. 검색 엔진이 페이지의 내용을 더 잘 이해하는 데 도움이 됨.
오늘은 무엇을 했는가
오늘은 이론 강의 위주였다.
오늘의 느낀 점
전 직장에서 몇 번 듣던 것과 컴퓨터 활용능력 자격증을 준비하며 스쳐지나가듯 보았던 걸 이렇게 본격적으로 배울 수 있어서 매우 유익했다. 의외로 나는 이런 IT 개발 직군과 잘 맞는 걸지도 모르겠다.
참고 자료
- IT/DT 기초지식 - 곽여송 부장님
- 참고할 사이트(코딩 공부): W3Schools Online Web Tutorials
'디지털 마케팅(04.01 ~ 07.03)' 카테고리의 다른 글
| 2024.05.23 - 35일차 [광고용 랜딩페이지 제작실습 2] (0) | 2024.05.23 |
|---|---|
| 2024.05.22 - 34일차 [광고용 랜딩페이지 제작실습 1] (0) | 2024.05.22 |
| 2024.05.20 - 32일차 [데이터 분석 기반 디지털 마케팅 과정 특강] (1) | 2024.05.20 |
| 2024.05.17 - 31일차 [디지털 콘텐츠 기획 및 제작: 산출물 공유 및 피드백_최종 & 메타(FB/IG) 광고전략 및 운영방법] (0) | 2024.05.17 |
| 2024.05.16 - 30일차 [디지털 콘텐츠 기획 및 제작: 산출물 공유 및 피드백] (1) | 2024.05.16 |
