Web -1

hoegon kim·2022년 12월 16일

web

IT 지식창고

목록 보기

3/21

Web 기본 구조

1. User Interface

브라우저 화면에서 웹사이트가 표시되는 부분을 제외한 나머지 영역(ex 주소창, 이전/다음 버튼, 새로고침 버튼, 즐겨찾기 탭 등)

2. 브라우저 엔진

User Interface와 렌더링 엔진 사이에서 발생하는 동작 제어

3. 렌더링 엔진

HTML, CSS를 파싱하여 화면에 표시 담당(ex. 서버측에서 전달받은 리소스 중에 .html 이나 .css 파일을 파싱하여 화면에 표시)

4. 네트워크 통신

네트워크 호출 시 역할 수행(ex. URL 입력시, 해당 서버측과 HTTP 통신을 통해 웹페이지 소스를 받음)

5. Javascript 해석기

Javascript 코드를 해석하고 실행(ex. 서버측에서 전달받은 리소스 중에 .js 파일을 해석하고 실행)

6. UI 백엔드

7. 데이터 저장소

브라우저 자체적으로 관리할 데이터 저장공간
(ex. 쿠키, HTML5 표준인 IndexedDB, 크롬 브라우저의 web SQL 등)

웹 사이트 제작시 점검사항 15가지

1) 도메인
2) 호스팅
3) 디자인
4) 개발(프로그래밍)
5) 개발(프로그래밍)비용을 줄여야 하는 경우
6) 네비게이션 & UI(User Interface)
7) 메인화면(index page)
8) 콘텐츠
9) 마케팅
10) 검색엔진최적화(SEO, Search Engine Optimization)
11) 크로스 브라우저, 크로스 디바이스 – 호환성
12) 모바일 버전 vs 반응형 웹
13) 이미지/폰트 저작권 관련
14) 제작 후 점검사항
15) 예산/비용

1. 도메인

가장 먼저 사이트의 존재를 알리는 것이 도메인이다.

방문 전의 잠재 고객은 도메인을 보고 사이트의 내용을 짐작한다.
- 도메인은 짧고 외우기 쉬운 것이 좋다
- 최상위 도메인은 .com 혹은 .co.kr을 사용한다.

예) www.bluejeanshop.com

청바지 전문몰인 경우 핵심키워드인 ‘bluejean’을 포함시킨다.
도메인만 봐도 어떤 사이트인지 알수 있다.
이해가 쉬운만큼 기억하기도 쉽다
검색결과 상위노출에 유리하다
검색엔진은 검색어가 ‘청바지’일때 ‘bluejean(청바지)’이 포함된 도메인이 연관성이 크다고 본다.
하위 경로에도 키워드를 포함시킨다.

예) www.bluejeanshop.com/skinnyjean/

폴더(경로)명 또한 해당 키워드를 활용한다.
경로만 봐도 제품 카테고리, 현재위치를 알 수 있다.
검색결과 상위노출에 유리하다
URL scheme 의미론적이어야 한다.
카테고리명과 폴더명을 같게 한다.
카테고리명과 폴더명 모두 연관성 있는 키워드를 적용한다.
가급적 하이픈(-)이나 숫자는 포함시키지 않는다.

2.호스팅

호스팅의 선정기준은 속도와 안정성이다. 그외에 개발/운영시 필요한 기능, 프로그램 지원여부, 부가서비스 등을 고려해서 선택한다.

다국어 제작시 문자셋은 utf-8로
일어, 중국어 등 외국어 버전까지 운영할 계획이라면 euc-kr 대신 utf-8 서버를 선택한다.
euc-kr 사용시 한글과 영어 외의 언어는 글자가 깨진다.
자동빽업 기능
- 자동으로 파일을 백업하여 실수로 파일이 삭제된 경우 몇일전 상타로 복원시키는 기능
회선속도/로딩속도
- 호스팅 회사의 호스팅 서비스를 이용중인 사이트를 방문해서 실제 로딩속도를 점거한다.
서버 OS버전, 지원 프로그램, DB환경, 이메일 계정 지원 여부 등 개발/운영 환경에 따른 고려가 필요하다.

3.디자인

시각적인 아름다움과 함께 정보전달, 편의성을 고려한다.

미학적으로 아름다운가?
- 이미지 요소의 질이 높을 수록 좋다
- 이미지 요소 = 사진, 일러스트, 아이콘, 타이포크라피
디자인 컨셉이 사이트 목적에 부합하는가?
사용자에게 줘야하는 느낌, 사용자가 가져야 할 감흥을 명확히 규정한다.
캐주얼복을 판매하면서 어둡고 고풍스러운 느낌을 줘선 안된다.
앤티크 가구를 판매하면서 가볍고 발랄한 느낌을 줘선 안된다.
중요한 요소들이 부각되고 있는가?
- 중요한 요소일 수록
  - 눈에 잘띄어야한다.
  - 사이즈가 꺼야 한다.
  - 색상이 강렬해야 한다.
  - 불륨감 있어야 한다.
  - 반복적으로 보여야 한다.
테마가 되는 색상이 정해져 있으며 일관되게 적용되고 있는가?
강조, 기능을 위한 색상 규칙이 정해져 있으며 잘 지켜지고 있는가?
링크가 걸려 있는 텍스트가 밑줄이나 색상 등 외형적으로 강조 되고 있는가?
텍스트의 가독성이 충분히 확보되어 있는가?
중요한 문장들이 위치, 크기, 색상에 의해 시각적으로 부각되고 있는가?

4.개발(프로그래밍)

정보전달 위주의 사이트인지 기능(서비스) 위주의 사이트인지에 따라 개발 유무, 개발 규모가 결정된다.

기능(게시판, 회원제 등)이 필요없고 단순히 이미지와 글을 보여주는 정도라면 html만으로 제작이 가능하다.
기능이 요구된다면 사이트의 규모, 운영목적등을 고려하여 적합한 개발언어를 선택한다.
저 예산의 소규모 사이트라면 기능/보안 문제로 고민하기보다 비용기준으로 선택해도 큰 문제가 없다.
주로 사용되는 언어들(php, asp, java 등)은 기능/보안 상에 치명적인 취약점을 가지지 않는다.
비용이 저렴한 php의 경우 상대적으로 기능/보안에 취약점이 있다고 하지만 야후나 페이스북, 워드프레스 등의 제작에 사용되고 있다.
```
 
```

5.개발(프로그래밍)비용을 줄여야 하는 경우

저예산으로 프로젝트를 진행할 경우 개발 비용을 줄이기 위해 아래의 옵션들을 선택할 수 있다.

웹사이트에 기능을 포함시키지 않는다.
wordpress, 제로보드 등 설치형 블로그나 CMS를 사용한다.
호스팅社에서 제공하는 '홈페이지 빌더를' 사용한다

6.네비게이션 & UI(User Interface)

네비게이션 & UI는 철저하게 사용자 입장에서 체크되어야 한다.

어떤 화면에서도 원하는 다른 화면으로 손쉽게 이동할 수 있어야 하고 필요한 정보를 직관적으로 발견할 수 있어야 한다.

사용자 편의성에 기초한 점검사항들을 확인해 보자.

UI 기본원칙은 일반적으로 통용되는 방식을 따르는 것이다.
로그아웃 버튼은 보통 화면 상단에 위치한다. 대부분의 사이트가 따르는 이 원칙을 어기고 엉뚱한 곳에 배치할 경우 사용자는 로그아웃 버튼을 찾아 헤맨 시간만큼 이 사이트를 싫어하게 된다.
네비게이션 구조, 카페고리 구조가 직관적이고 논리적인가?
네이게이션이 이미지나 플래쉬로 되어있다면 하단 쪽에 사이트 전체에 대한 텍스트 링크를 걸어 주는 것이 좋다.
각 페이지 마다 제목 바로 밑에 현재위치(bread crumbs)가 표시되어 있는가?
깨진 링크, 없는 페이지에 접속이 시도된 경우 자체 제작된 404 page를 통해 대체 페이지 혹은 메인페이지로의 링크를 제공하는 것이 좋다.
아크로뱃이나 어도비, 자바 등의 미디어 재생을 위한 프러그인이나 응용프로그램이 필요한 경우 해당 프로그램의 링크를 걸어준다.
텍스트 위주의 콘텐츠인 경우 본문에 대한 '인쇄' 버튼을 제공한다.
사이트맵을 제공한다.(가급적 이미지가 아닌 텍스트 링크를 사용하는 것이 SEO에 유리하다)
사이트 규모가 클 경우 '사이트 내 검색'기능을 포함시킨다.

7.메인화면(index page)

메인화면은 사이트 내용을 요약해 보여주며서도 구성이 간결한 것이 좋다.

화면 구성이 무조건 간결해야 하는 것은 아니다.
- 방문 목적이 다양하다면 목적에 부합하는 항목들로 다양하게 구성하는 것이 더 효율적이다.
  - 방문 목적이 상담이라면 상담전화 번호가 표시되어야 한다.
  - 방문 목적이 구매라면 주요 제품에 대한 바로 구매 버튼이 있어야 한다.
  - 이벤트 참여가 목적이라면 이벤트 안내가 보여져야 한다.
  - 배송정보가 목적이라면 '배송확인'아이콘이 보여져야 한다.
- 신규방문자를 위해'우리가 누구이고', '무슨일을 하며', '무엇을 제공할 것인지'를 알려줘야 한다.
- index page(메인페이지)만 보고도 사이트 주요 내용을 알 수 있도록 명확한 메시지를 전달해야 한다.
- 메인페이지에서 중요한 페이지로 연결되는 링크는 시각적으로 부각시켜야 한다.

8.콘텐츠

온라인 상에서 콘텐츠는 대부분 '텍스트(글)'로 되어 있다. 이미지와 영상은 보조적인 역할을 한다.

좋은 정보를 담고 있는 양질의 글은 그 정보가 필요한 사람들을 웹사이트로 불러들인다.

참고 게시물 : 콘텐츠의 품질이 마케팅 비용을 낮춘다.

문구는 간결하면서도 정확하게 정보를 전달해야 한다.(길고 난해한 문장을 찾아서 알기 쉽게 수정할 것)
문단의 구분, 제목, 소제목, 강조문구 등의 역할
- 대충 훑어 봐도 이해가 가능해야 한다.
- 본문 전체를 훑어 볼 때 문단, 제목, 소제목, 강조문구 등이 요약된 내용을 전달한다.
정보나 주장에 대한 근거를 뒷받침 하는 간단한 인용문이나 인용원문에 대한 링크를 제공한다.
소셜공유, RSS피드를 통해 콘텐츠를 전파한다.
사이트 내에서 블로그 운영
- 주소도 다르고 인터페이스도 다른 블로그를 운영할 경우 블로그 방문자를 웹사이트로 유입시키기 어렵다.
  - 예) 사이트 주소가 WWW.bluejeansmall.co.kr 이고 블로그 가 blog.naver.com/bluejeanmall 일 경우 웹사이트와 블로그 사이에 거리감이 있다.
  - 예) 사이트 주소가 www.bluejeanmall.co.kr 이고 블로그 가 www.bluejeanmall.co.kr/blog일 경우 웹사이트와 블로그가 같은 도메인과 인터페이스를 가지므로 거리감이 없다.
  - 블로그 방문자는 콘텐츠(정보) 소비자이고 웹사이트 방문자는 제품소비자다. 블로그 방문자를 콘텐츠 소비자에서 제품 소비자로 전환(conversion)시키는데는 웹사이트 내에서 블로그를 운영하는 것이 더 유리하다.
  - 그럼에도 불구하고 마케팅 측면에서는 사이트 내의 블로그보다 네이버 블로그가 네이버에서 더 많이 노출된다.
  - 반대로 사이트 내에서 운영되는 블로그가 구글 상위 노출에 유리하다.

9.마케팅

마케팅 요소들을 적소에 배치해서 방문자가 웹사이트를 주변에 알리거나 제품을 구매하도록 유도할 수 있다.

버튼이나 아이콘, 링크, 네비게이션 등 고객의 행동을 유도하는 장치(콜투액션 : call to action)와 고객에게 신뢰를 주는 내용이 이런 역할을 한다.

콜투액션을 통해 고객의 기대행동을 분명하게 제시 혹은 유도하고 있는가?
페이지 타이틀과 본문의 도입부 : 검색결과에 제목과 미리보기 형태로 보여지므로 클릭을 유도할 정도로 흥미로운 문구를 작성해야 한다.
고객의 피드백 창구가 충분한가?
방문자에게 신뢰를 주고 있는가?
- 주소, 연락처, 블로그, 소셜은 물론 회원증, 인증서, 수상경력, 연혁, 거래처, 협력사, 연도별 실적, 포트폴리오 등 신뢰를 줄수 있는 항목을 누락시키지 말것
즐겨찾기 버튼
- 즐겨찾기 해놓고 사이트에 접속하는 직접 방문자가 많은 경우 검색엔진 상위노출에 유리하다.
- 즐겨찾기 버튼은 일종의 '콜투액션'이다. 즐겨찾기 등록을 유도한다.
파비콘
- 즐겨찾기 모음에서 피비콘은 시각적으로 두드러지고 사이트의 존재감을 높인다.
SNS 공유 버튼
홈페이지빌더로 제작할 경우 sitemap.xml 파일 업로드나 로그분석, 전환추적을 위한 스크립트의 삽입을 제한하고 있는지 확인할 필요가 있다.
구글/빙 웹마스터 도구 등록, 네이버/다음 사이트 등록
구글 애널리스틱스 등록
RSS 피드 등록

10. 검색엔진최적화(SEO, Search Engine Optimization)

검색엔진최적화는 아래의 기술적인 항목들에 의해 구현되지만 보다 중요한 것은 콘텐츠의 질을 높이고 웹페이지를 부지런히 알리는 것이다.

title, h1 태그 안에 연관성 있는 키워드 포함
키워드 연구
메타태그 - title, description, keyword
semantic markup(h1 등)
sitemap.xml
robots.txt
User-friendly & Search Engine-Friendly
Alt 태그
구글 웹마스터도구 등록
구글 애널리틱스 등록
- SEO는 제작단계에서 시작하는 것이 좋다
- 도메인, 카테고리명, 제목, 본문, UI 등 대부분의 사이트 구성요소가 SEO의 영향을 받는다.
- 제작 후에 SEO를 진행하면 사이트 구조 자체를 변경해야 할 수도 있다.

검색엔진 최적화의 본질적인 부분은 태그가 아니라 콘텐츠와 홍보에 있다.
- 양질의 콘텐츠를 생성하고 카페, 커뮤니티, 동호회 등 연관성 있는 사이트에 링크를 퍼트린다.
- 생성된 콘텐츠는 사이트, 블로그, 트위터, 페이스북, 카페 등 다른 매체에 재활용한다.
- 블로그의 경우 구글 대상 블로그(워드프레스)와 네이버 대상 블로그(네이버 블로그)를 같이 운영하고 하나의 콘텐츠를 중복 게재하는 것이 효과적이다. 서로간의 크롤링이 베타적인 관계에 있다. 구글에는 블로그가, 네이버에는 워드프레스가 서로 노출되지 않는다.

11.크로스 브라우저, 크로스 디바이스 – 호환성

어떤 환경에서 접속하더라도 화면이 깨지거나 UI편의성, 기능 요소들이 나빠지지 않도록 한다.

호환성 점검항목
- 화면 레이아웃이 깨지지 않는지
- 글자가 너무 크거나 작지 않는지
- UI(User Interface)가 편의성을 제공하는지
- 기능요소(게시판, 입력폼)가 제대로 기능하는지
- 이미지, 동영상이 제대로 로드되지 않을 때 대체요소가 사용되고 있는지
  - 이미지 대체요소 - alt, title 태그
  - 동영상 대체요소 - caption 태그
호환성 점검 대상
- 브라우저 : Internet Explorer, Chrome, Safari, FireFox 등(버전 별도로 체크 필요)
- 디바이스 : 데스크탑, 태블릿, 스마트폰
- 운영체제 : Windows, Linux, Mac 등
- 해상도 : 태블릿, 노트북 등 화면해상도가 작을 때 div의 overflow속성에 의해 콘텐츠가 영역 밖으로 새나가거나 숨어버리는 현상이 생기지 않는지 체크.

12.모바일 버전 vs 반응형 웹

모바일 접속에 대비하는 두 가지 옵션이 있다. 모바일 사이트를 별도로 제작하는 것과 반응형 웹으로 제작하는 것

모바일 사이트는 PC사이트와는 별개의 사이트를 운영하는 것이고 반응형 웹은 기기별 스타일(CSS)만 다르게 적용시켜서 레이아웃, 글꼴 속성, 이미지 크기 등이 화면 해상도에 대응하게 만드는 방식이다. 각각의 장단점을 파악해 보자.

모바일 버전
- 별도의 모바일 버전 사이트를 운영
  - pc버전과 UI, 레이아웃, 콘텐츠, 도메인 모두 다르다.
- 낮은 해상도에서 보기 편한 레이아웃, 폰트 스타일(주로 크기), 콘텐츠
- pc버전과 별개로 제작, 운영해야 한다.
반응형 웹
- pc버전, 모바일 버전 구분 없이 하나의 사이트 운영
- 모바일로 접속할 경우 낮은 해상도에 적합하게 레이아웃, UI, 콘텐츠가 자동으로 변경된다.
- 모바일 버전을 따로 제작하거나 관리해야 하는 불편함이 없어진다.

14.제작 후 점검사항

오픈하기전 마지막으로 링크, 기능, 맞춤법 등을 체크하는 시간을 가진다.

마지막 점검단계에서 구성이나 콘텐츠를 바꾸는 큰 수정은 가급적 피하도록 한다. 수정할 기회는 오픈 이후에도 얼마든지 있다.

깨진 링크가 없는지
메일로 연결되는 링크의 메일 주소, 통화로 연결되는 링크의 전화번호 확인
기능 요소들 정상 작동 여부
- 게시판, 입력폼, 예약 등
JavaScript 에러 체크
호환성 체크 : 브라우저, 디바이스, OS, 해상도
맞춤법 체크
- 국문 맞춤법 및 문법 체크
  - 크롬 확장프로그램 '바른 말씨'아래 링크에서 설치 가능
  - 링크 : https://chrome.google.com/webstore/detail/%EB%B0%94%EB%A5%B8-%EB%A7%90%EC%94%A8/jbeblnocjjhgkbdeocekdmdipkifpakk?hl=ko
- 영문 스펠링 체크
  - 크롬 확장프로그램 'Spell Checker for Chrome'아래 링크에서 설치 가능
  - 링크 : https://chrome.google.com/webstore/detail/spell-checker-for-chrome/jfpdnkkdgghlpdgldicfgnnnkhdfhocg?hl=ko

15.예산/비용

디자인비 + 개발비(프로그래밍) + 기획/콘텐츠 제작비 + SEO

디자인 비용
- 이미지 구매 비용
  - 제작업체가 보유한 라이센스에 따라 비용이 달라진다.
    - 제작업체가 외주 작업용 라이센스를 가지고 라이센스 범위 내에서 작업하는 경우 비용이 발생하지 않는다.
    - 제작업체의 외주 작업용 라이센스 외에 다른 이미지를 사용할 경우 그 이미지의 라이센스에 따라 비용이 발생한다.
- 디자이너 작업비
개발(프로그래밍)비용
- 기능요소가 포함될 경우 개발비용이 발생한다.
- 기능 요소 없이 단순히 정보전달이 목적이라면 개발비용이 발생하지 않는다.
- 기능요소의 비중이 적고 특별한 기능이 요구되지 않을 경우 오픈소스나 홈페이지빌더를 활용해서 개발을 대신할 수 있다.
기획/콘텐츠 제작 비용
- 소규모 프로젝트에서는 작업인원 중 일부가 업무와 상관없이 처리하기도 하지만 규모가 커지면 전문 기획자, 콘텐츠 제작자가 참여해야한다.
SEO(검색엔진최적화)
- SEO 없이도 홈페이지를 완성할 수 있다.
- SEO가 반영되면 마케팅이 강화된다.
  - SEO마케팅, 콘텐츠 마케팅, 바이럴 마케팅등
- 참고게시물 : SEO 검색엔진최적화의 효과
- 프로젝트 종료 후 SEO를 반영할 경우 적지않은 비용이 발생하므로 SEO 계획이 있다면 제작단계에서 진행하는 것이 좋다.
  - SEO 작업중 홈페이지 제작과 연계되는 것들
    - 도메인, 하위폴더
    - 카테고리명
    - 콘텐츠에 사용되는 키워드, 키프레이즈
    - 각종 tag의 값 예)keyword, description,title, img

모든 항목을 충족시키는 것은 어려운 일이고 프로젝트의 목적이나 환경에 맞게 선별적으로 적용할 필요가 있다. 특히 예산에 따라 포기할 부분은 감과하게 제외시키는 것이 현명한 방법이다. 예를 들면 콘텐츠 외주제작이나 마케팅, SEO 등은 차후 진행이 가능한 작업들이다. 그 외에 필수적인 작업들은 위 항목들을 가이드라인 삼아 작업의 완성도를 높일 수 있을 것이다.

hoegon kim

이전 포스트