이것은 최소한! 웹 담당자가 알아야 할 기술 지식

나는 기술자가 아니고, 웹 제작 기술을 알 필요는 없다. 그렇게 생각하고 있지 않습니까? 실제로 어떤가 하면, 이런 기사를 쓰고 있을 정도이니 '최소한은 있는 것이 좋다'고 단언합니다. 왜냐하면, 홈페이지를 최종적으로 확인하는 것은 담당자이며, '사이트의 품질' 정도는 파악하고 있지 않으면, 프로젝트에 최악의 사이트가 제공되어도 판별할 수 없기 때문입니다.

게다가 어려운 점은 크리에이터나 제작 파트너 기업에 따라 '품질'의 가치 기준이 전혀 다르다는 것입니다. 디자인을 중시하는 유형도 있고, 프로그래밍 코드의 품질을 중시하는 유형도 있습니다. 정보 설계를 중요하게 생각하는 유형도 있고, 마케팅을 중요하게 생각하는 사람도 있습니다. 최종적으로 무엇을 중시할지 결정하는 것은 발주자 측에 달려 있습니다.

물론 크리에이터나 제작사 측으로부터 '이렇게 하는 것이 좋다'는 제안도 받을 것입니다. 최고의 길을 제안하지 않는 제작 파트너는 논외겠지만, 무엇이 좋은지 판단하기 위해 최소한의 지식이 있다면, 질 높은 논의도 생겨날 것입니다.

또한, 제작 과정에서 제작물을 확인할 때, 최소한의 지식이 없으면 사고의 불일치가 발생할 수도 있습니다. 예를 들어, 제작 파트너가 말하는 의도를 잘못 이해하거나, 반대로 자신이 한 말이 원래 제작 측에서 사용하는 의미와 달라 의사소통상의 불일치가 발생할 수도 있습니다.

예를 들어 IT 용어를 사용해야 할 때, 그 의미를 착각하고 기억하고 있다면 서로 이야기가 통하지 않게 됩니다. 따라서 의사소통상의 위험을 줄이고, 스스로 좋고 나쁨을 판단하기 위해 기술에 대한 최소한의 이해가 필요합니다.

수백 엔짜리 반찬을 사는 것이 아니라, 수십만, 수백만, 수천만 엔에 달하는 고액의 홈페이지를 구매하는 것이므로, 스스로 어느 정도 이해할 수 있게 되면, 홈페이지에서 더 좋은 성과를 낼 수 있을 것입니다.

홈페이지 제작 절차

기술에 대해 이야기하기 전에, 홈페이지 제작의 기본 절차를 알아봅시다. 어떤 절차와 어떤 가치관으로 진행되는지 알고 있다면, 전체적인 그림을 파악한 후 더욱 건설적으로 프로젝트를 진행할 수 있을 것입니다.

히어링

먼저, 어떤 사이트를 만들고 싶은지, 이번에 홈페이지를 제작하는 목표가 어디에 있는지 결정해야 합니다. 상품이나 서비스를 판매하는 것인지, 아니면 문의를 받기 위한 것인지, 브랜드력을 높이기 위한 것인지. 목표 설정이 모호하면, 당연히 제작하는 사이트도 일관성이 없게 됩니다. 먼저 목표를 명확히 합시다.

또한 이번에 어떤 페이지가 최소한으로 필요한지, 기업 색상이 있는지, 없다면 색상 이미지는 어떤지, 참고하고 싶은 사이트가 있는지 등을 확인합니다. 제작 파트너가 다양한 정보에 대해 질문할 것이므로, 만들고 싶은 사이트의 이미지를 미리 가지고 있으면 이야기가 원활하게 진행됩니다.

사이트맵, 기획, 견적

질의응답이 완료되면, 제작 파트너는 일단 정보를 가지고 돌아갑니다. 그 후, 전체적인 대략적인 기획과 사이트 구조를 나타내는 사이트맵, 그리고 견적을 작성합니다. 다음 미팅에서 해당 정보를 바탕으로 작성된 견적을 승인하면 제작이 시작될 것입니다.

참고로 견적에 대해 말씀드리자면, 가격의 저렴함만으로 결정하는 것은 좋지 않습니다. 자세한 제작 파트너를 찾는 방법에 관해서는여기기사에 정리해 두었으니, 꼭 참고해 보시기 바랍니다.

대부분의 경우, 제작사 측에서 사용할 수 있는 사진이나 자료가 있는지 요청할 것입니다. 만약 자료를 요청받으면, 과거의 팸플릿 데이터나 사용하고 싶은 이미지, 동영상, 로고 등 전달 가능한 모든 데이터를 전달해 주세요. 디자인에 잘 활용해 줄 것입니다.

와이어프레임

견적이 승인되면, 다음으로 와이어프레임을 제작합니다. 와이어프레임은 설계도와 같은 것으로, 대부분 회색 상자나 선, 그리고 글자로만 '어떤 콘텐츠가 어디에 들어갈지' 지정한 것입니다. 부동산 평면도나 가구 조립 설계도와 같은 것이죠.

와이어프레임이 완성되면, 글 내용과 레이아웃을 서로 확인하고, 누락된 콘텐츠는 없는지, 사용자에게 이해하기 쉬운 설계인지 등을 확인합니다. 클라이언트님께도 확인을 요청드리지만, 물론 전문가가 아니시므로 단순히 느낀 점을 말씀해 주시면 됩니다.

예를 들어, 한눈에 보기 어렵다거나, 이 콘텐츠는 더 강조하고 싶다거나. 문구를 이렇게 바꾸고 싶다거나. 생각한 것을 그대로 전달해 주세요. 제작 파트너도 사용자 관점의 중요한 정보로 받아들일 것입니다.

디자인 제작

여기서부터 구체적인 제작에 들어갑니다. 먼저 제작 파트너는 디자인 방향성을 결정하기 위해, 첫 페이지(탑 페이지)만 먼저 제시하는 경우가 많습니다. 첫 페이지 디자인을 확인하고, 방향성이 맞는지 확인하여 승인되면, 다른 페이지 제작에 들어갑니다. 참고로 첫 페이지 외의 페이지는 '하위 페이지'라고 불립니다. 디자인은 일단 방향성을 정하고 모두 만들어 버리면, 나중에 변경하기가 어려워집니다. 그만큼 노력과 수고가 들기 때문입니다.

예를 들어, 나중에 색상 변경을 하려고 하면, 왠지 '색상 변경 정도는 금방 할 수 있지 않을까'라고 생각할 수도 있지만, 디자인은 색상이나 레이아웃 등 모든 것이 절묘한 균형으로 이루어져 있어, 색상 하나만 바꾸면 균형이 깨져서 전체가 촌스러워질 수도 있습니다.

색상을 바꾸면 다른 디자인 요소도 모두 변경해야 하므로, 거의 다시 만드는 것과 같은 수고가 들 수도 있습니다. 따라서 디자인 방향성은 여기서 신중하게 논의하여 결정해 나갑시다. 첫 페이지 디자인이 결정되면, 하위 페이지를 모두 디자인하고, 승인되면 '코딩' 작업으로 넘어갑니다.

코딩

지금까지 만들어온 디자인은 어디까지나 이미지로 존재하며, 클릭으로 링크가 이동하지도 않고, 슬라이드쇼와 같은 기능도 없습니다. Google에서 검색해도 나오지 않으며, 홈페이지로서의 기능을 전혀 가지고 있지 않습니다. 따라서 단순한 이미지에 홈페이지 기능을 부여하는 것이 코딩 작업이 됩니다.

코딩은 지금까지 만들어온 이미지를 그대로 홈페이지로서 기능하는 형태로 재구축하는 작업입니다. 따라서 유능한 엔지니어라면 자주 확인하지 않아도 외관을 정확하게 재현해 줄 것입니다. 클라이언트님께서 하실 일은 최종적으로 완성된 것을 디자인대로 잘 조립하고, 레이아웃에 깨짐이 없으며, 링크 등도 틀리지 않았는지 확인하는 것입니다.

다만, 애니메이션과 같은 움직임을 추가한 경우에는 코딩 후에야 비로소 움직임의 완성형을 확인할 수 있습니다. 이미지의 차이가 없는지 꼼꼼히 확인해야 합니다. 어쨌든 코딩 단계에서 미세 조정 정도의 수정이 몇 가지 있고 문제가 없다면 납품이 됩니다. 단, 납품은 특히 회원가입과 같은 시스템 개발이 존재하지 않고, 정보 전달을 주 목적으로 하는 일반적인 홈페이지인 경우입니다.

이러한 정보를 전달하기 위해 만드는 사이트를 '정적 사이트'라고 부릅니다. 여기까지의 코딩 작업을 '프론트엔드'라고 부르기도 합니다.

다만, 회원가입 등을 포함하는 웹 서비스나 웹 애플리케이션이라면 코딩 후에 시스템 개발을 해야 합니다. 시스템 개발이 필요한 사이트는 '동적 사이트'라고 부릅니다. 시스템 개발 측의 작업을 '백엔드'라고 부릅니다.

시스템 개발

앞서 언급했듯이, 회원가입이나 상품 구매 기능과 같이 사용자가 어떤 도구로 사용하는 기능이 홈페이지에 있는 경우 시스템 개발이 필요합니다. 시스템 개발에는 주로 php나 Ruby라고 불리는 언어가 사용되며, HTML이나 CSS 코딩보다 더 깊은 프로그래밍 지식과 사고방식이 필요합니다. 시스템 개발과 관련하여 클라이언트가 해야 할 일은 원하는 기능이 제대로 작동하는지 실제로 사용해보고 확인하는 것입니다.

대부분의 동작은 물론 제작 파트너가 확인하지만, 그들은 전문가로서 확인하기 때문에 전혀 지식이 없는 사용자가 조작했을 때 예상치 못한 오류가 발생할 수도 있으며, 그러한 오류에 대한 누락이 있을 가능성도 있습니다.

따라서 클라이언트가 확인할 때는 완전히 초보 사용자의 관점에서 자유롭게 사용해보고 확인한 후, 정상적으로 기능하는지 확인하는 것이 좋습니다. 클라이언트에게 요구되는 것은 어디까지나 사용자 관점의 확인입니다.

납품 및 공개

정적 사이트 또는 동적 사이트 개발이 완료되면 드디어 납품입니다. 납품은 나중에 자세히 설명해 드리겠지만, 서버라고 불리는 데이터 저장소와 같은 곳으로 데이터를 옮겨야 합니다. 서버는 제작 파트너 측에서 준비할 수도 있고, 클라이언트 측에서 준비할 수도 있습니다. 이미 홈페이지를 가지고 있거나 어느 정도 큰 조직에서 홈페이지를 공개하는 경우에는 자체 서버를 가지고 있는 것이 일반적입니다.

서버에는 테스트(스테이징) 환경이라고 불리는 외부에 공개되지 않는 환경과, 본번 환경이라고 불리는 일반 사용자에게 공개되는 환경이 존재합니다. 다만, 속도를 중시하거나 공개하면서 수정을 가해나가는 상황에 따라 본번 환경만 준비하고 모든 것을 본번 환경에서 확인한 후 그대로 공개하는 경우도 있지만, 기본적으로는 테스트 환경과 본번 환경이 존재합니다. 그리고 테스트 환경에서 확인하고 OK라면 본번 환경에 공개하여 납품, 공개(릴리스)가 됩니다.

HTML、CSS、JavaScript、php、Ruby、Python

홈페이지를 제작할 때 HTML이나 CSS라는 언어를 사용하여 작성한다는 것은 어느 정도 널리 알려진 사실일 것입니다. 다만, 홈페이지를 제작하는 언어는 많이 있으며, 많이 사용되는 언어만 모아도 6가지 종류가 있습니다. 이번에는 점유율이 높은 언어 6가지를 소개해 드리겠습니다.

HTML

홈페이지의 골격을 만드는 언어입니다. 홈페이지는 버튼이나 이미지, 텍스트나 제목 등과 같은 세부적인 부분들로 구성되어 있지만, 이러한 부분들은 말하자면 '기계어'로 변환해 주지 않으면 무엇이 버튼이고 무엇이 이미지인지 Google 검색 엔진이나 컴퓨터가 이해하지 못합니다.

따라서 홈페이지를 기계가 이해할 수 있도록 각 부분에 적절한 의미를 부여하는 것입니다. 구체적인 방법은 관심이 있다면 찾아보세요. HTML은 단순한 의미 부여이므로 색상이나 레이아웃과 같은 디자인 요소를 재현할 수는 없습니다.

CSS

HTML로 의미를 부여한 사이트에 색상이나 위치와 같은 디자인 요소를 추가합니다. CSS로 가능한 범위는 해마다 넓어지고 있으며, 애니메이션도 CSS로 적용할 수 있습니다. CSS가 있어야 비로소 홈페이지는 디자인을 얻을 수 있습니다. HTML만으로는 단순한 문자열의 나열에 불과합니다.

JavaScript

홈페이지를 앱처럼 사용자가 조작할 수 있도록 하는 언어입니다. 예를 들어 클릭하면 이미지가 확대되거나, 데이터 목록을 정렬하거나, 복잡한 애니메이션을 적용하는 경우 대부분 JavaScript로 제어됩니다.

간단한 애니메이션은 CSS로도 적용할 수 있지만, 예를 들어 간단한 애니메이션을 언제 어떤 타이밍에 작동시킬지 등은 JavaScript로 제어합니다. 다만, JavaScript는 어디까지나 '조작'만 가능할 뿐, 데이터를 '저장, 기록' 등은 할 수 없습니다. 이러한 것들을 할 수 있는 것은 이후에 소개할 언어들입니다. 참고로, HTML, CSS, JavaScript까지를 프론트엔드라고 부릅니다.

PHP

데이터 저장 등이 가능해지는 것은 여기서 소개할 '백엔드'라고 불리는 언어입니다. 그중에서도 PHP는 웹 서비스, 웹 애플리케이션 개발에 자주 사용됩니다. 언어 자체는 오래되었고 최신 사고방식이나 로직으로 구성되어 있지는 않지만, 정보가 많고 다루는 사람도 많아서 리소스나 인력 확보에 어려움이 없습니다. WordPress도 PHP로 만들어져 있어 WordPress와의 호환성도 좋고, 시스템 개발에 가장 많이 사용되는 언어 중 하나입니다.

Ruby

일본인이 개발하고 전 세계에서 사용되는 희귀한 언어입니다. 최근에는 스타트업을 중심으로 웹 서비스에서 자주 사용되기 시작했습니다. 하지만 실제로 사용되는 것은 Ruby on Rails라는 Ruby를 더 쉽게 개발할 수 있도록 하는 프레임워크라고 불리는 메커니즘을 사용하여 작성되는 경우가 많습니다. 일본에서는 PHP만큼 널리 사용되는 백엔드 언어입니다.

Python

기계 학습이나 인공 지능 등을 도입하여 개발할 때 자주 사용되는 언어입니다. 그 분야에서 사용되는 이유는 인공 지능이나 기계 학습을 활용하기 위한 개발을 지원하는 시스템이 잘 갖춰져 있기 때문입니다. 최근에는 스프레드시트 대신 Python을 배우는 등, 통계 및 데이터 분석 분야에서도 사용되고 있으며, 다른 두 언어와는 약간 다른 특징을 가지고 있습니다.

백엔드 언어는 특히, 머신러닝이나 인공지능을 사용하지 않는 한, 어떤 것을 사용하든 클라이언트에게 큰 차이는 없습니다. 굳이 말하자면, PHP나 Ruby on Rails라면 작성할 수 있는 인재가 많기 때문에, 만약 개발자가 바뀌더라도 다른 개발자를 찾기 쉽다는 정도로 기억해두면 좋을 것입니다.

서버와 도메인, SSL, 데이터베이스, FTP

다음으로 서버 관련 설명을 드리겠습니다. 클라이언트 측에서 준비하는 경우도 많으므로, 용어로서든 기능으로서든 파악해두는 것이 대화가 더 원활해질 것입니다. 그럼, 하나씩 설명을 시작하겠습니다.

서버

누구나 웹사이트를 볼 수 있도록 하려면 먼저 서버가 필요합니다. 서버는 데이터를 저장하는 장소와 같으며, 오프라인에서 말하는 임대 창고와 비슷하다고 생각하시면 됩니다. 서버를 소유한 회사가 많은 특수 하드디스크를 가지고 있고, 그 일부를 빌려주는 이미지입니다.

물론 자체적으로 서버를 구축할 수도 있지만, 운영 및 설치 비용이 많이 듭니다. 웹사이트 데이터를 서버에 두어야 비로소 일반에 공개될 수 있습니다. 하지만 서버만으로는 아무도 해당 사이트에 접속할 수 없습니다. URL이 부여되지 않았기 때문입니다. 그래서 다음으로 설명할 도메인이 필요합니다.

도메인

도메인이란 웹사이트 주소와 같은 것으로, 본 사이트의 경우 quon.ink가 도메인입니다. 도메인은 도메인 관리 회사에서 취득할 수 있습니다.

도메인 관리 회사로는 '오나마에.com' 등이 유명합니다. 도메인을 취득하고, 홈페이지 데이터가 저장된 서버와 연결함으로써 비로소 누구나 홈페이지에 접속할 수 있게 됩니다. 그리고 Google과 같은 검색 엔진에도 등록되어 검색하면 접속할 수 있게 됩니다.

참고로 URL이라고 불리기도 하지만, URL은 예를 들어 'https://quon.ink/blog/tsukuba/'와 같이 도메인을 포함한 전체 주소를 의미합니다. 도메인은 어디까지나 'quon.ink'를 의미한다고 생각하면 이해하기 쉬울 것입니다.

데이터베이스

일반적으로 웹사이트 데이터는 컴퓨터 내부와 마찬가지로 '파일' 형태로 저장됩니다. 다만, 데이터에 따라서는 파일 형식으로 저장하면 오히려 다루기 어려워지는 경우도 있습니다.

예를 들어 사용자 데이터 등입니다. 사용자의 이름, 나이, 이메일 주소와 같은 데이터는 검색하거나 편집하는 경우가 많습니다. 그렇게 되면 파일 형태가 아닌 '텍스트만'으로 다루는 것이 프로그램상 처리하기 더 쉬워집니다.

이처럼 텍스트로 다루는 것이 편리한 데이터의 경우, 데이터베이스를 활용합니다. 데이터베이스는 대부분의 서버에 설치되어 있으며, 자유롭게 다룰 수 있습니다. 블로그 게시물이나 SNS 게시물과 같이 방대하게 늘어나는 데이터에 대해서도 기본적으로 데이터베이스에 저장됩니다.

SSL

홈페이지가 악의적인 해커에게 해킹당하지 않도록 하는 보안입니다. URL을 보면 'http'와 'https' 두 가지를 볼 수 있을 텐데, 'https'로 되어 있다면 SSL이 작동하고 보안이 적용되고 있다는 의미입니다.

컴퓨터로 웹사이트를 볼 때는 브라우저라는 애플리케이션을 사용하여 홈페이지를 열람합니다. 홈페이지를 열람할 때 브라우저와 서버 사이에 데이터 통신이 이루어지는데, SSL화되어 있지 않은 경우, 원본 데이터가 서버와 브라우저 사이를 오고 갑니다. 이렇게 되면 만약 악의적인 해커(크래커)가 데이터를 훔치려 한다면, 통신 중간에 끼어들어 쉽게 정보를 도난당할 수 있습니다.

하지만 SSL화해두면 통신된 데이터는 모두 암호화되므로, 훔치려 해도 해독할 수 없게 됩니다. 따라서 보안이 강화되는 것입니다. 예전에는 SSL화에 꽤 많은 비용이 들었지만, 최근에는 무료로 SSL을 사용할 수 있는 서버도 늘어났습니다.

FTP 정보, FTP 소프트웨어

FTP 소프트웨어는 자신의 컴퓨터에서 서버 내용에 접근하기 위한 도구입니다. 서버에 데이터를 올려야 비로소 홈페이지를 일반에 공개할 수 있다고 말씀드렸는데, FTP 소프트웨어로 서버에 접근함으로써 데이터를 서버로 전송할 수 있습니다.

그리고 FTP 정보란 컴퓨터에서 서버에 접근하기 위해 필요한 열쇠와 같은 것입니다. FTP 소프트웨어에 FTP 정보를 입력해야 비로소 서버 내부에 접근할 수 있습니다. FTP 정보는 서버를 빌릴 때 제공되므로, 필요하다면 제작 파트너에게 전달해 주세요.

다만, 회사 방침에 따라 운영 서버에는 사내에서만 접근하도록 하는 경우도 있습니다. 그럴 때는 테스트 서버의 FTP 정보만 전달하거나, 제작 파트너 측에서 테스트 서버를 준비하도록 해야 할 것입니다.

CMS와 워드프레스

CMS는 '콘텐츠 관리 시스템(Content Management System)'의 약자로, 홈페이지의 레이아웃, 텍스트, 이미지 등 콘텐츠를 관리 화면에서 쉽게 변경할 수 있도록 하는 시스템을 의미합니다.

홈페이지는 지금까지 말씀드린 바와 같이 다양한 언어와 과정을 통해 만들어집니다. CMS는 프로그래밍 등의 지식이 없어도 홈페이지를 변경하거나 구축할 수 있는 시스템이라고도 할 수 있습니다.

그러한 CMS 중에서도 가장 유명한 것이 워드프레스입니다. 워드프레스는 무료로 제공되는 CMS로, 전 세계에 존재하는 홈페이지의 40% 이상이 워드프레스로 구축되어 있다고 합니다. 여기서 한 가지 오해되는 점은 워드프레스를 사용하면 쉽고 저렴하게 홈페이지를 구축할 수 있지 않을까 하는 것입니다. 여기에는 큰 오해가 있습니다.

확실히 템플릿을 그대로 사용하면 순식간에 홈페이지를 구축하는 것이 가능합니다. 하지만 오리지널 디자인의 경우, 일단 일반적인 방식으로 홈페이지를 만든 후에 그 데이터를 워드프레스에서 사용할 수 있도록 템플릿화하는 작업이 추가되므로, 일반 사이트보다 공수와 가격이 모두 높아집니다.

다만, 워드프레스로 만든 사이트는 예를 들어 블로그나 뉴스를 업데이트하거나 사이트의 일부를 업데이트할 수 있게 되므로, 클라이언트 측에서 필요한 부분을 관리하고 변경할 수 있다는 장점이 있습니다.

그렇다고 해서 사이트의 모든 것을 변경할 수 있게 되는 것은 아닙니다. 자유롭게 업데이트하고 싶은 부분은 특별한 프로그램을 구성하여 변경할 수 있도록 편집해야 합니다. 처음부터 어디를 업데이트하고 싶은지 결정하고 WordPress화함으로써 지정된 부분의 변경이 가능해진다는 의미입니다. 제작 파트너와 어디를 업데이트할 수 있도록 할지 논의하여 결정하지 않으면 WordPress화할 의미가 없습니다. 변경하고 싶은 부분을 충분히 논의하여 제작을 진행하도록 합시다.

캐시와 캐시 삭제

웹사이트를 표시하려면 서버에서 브라우저로 데이터를 보내야 합니다. 하지만 매번 페이지를 열 때마다 통신한다면 표시도 느려지게 됩니다. 그래서 표시를 빠르고 스트레스 없이 하기 위해 한 번 읽어 들인 데이터를 컴퓨터에 저장해 둡니다. 그러면 일일이 서버에서 데이터를 불러오지 않아도 되므로 표시가 빨라집니다.

하지만 캐시에는 단점이 있습니다. 그것은 서버 측에서 파일을 최신으로 업데이트해도 캐시가 컴퓨터에 남아있어 새로운 파일로 업데이트되지 않는다는 것입니다. 캐시는 일정 시간이 지나면 사라지지만, 만약 제작 파트너와 실시간으로 확인해야 하는 경우 기다릴 수 없습니다. 그럴 때는 브라우저의 캐시를 수동으로 삭제할 수 있습니다. 브라우저마다 캐시 삭제 방법이 다르므로, 지금 사용하고 있는 브라우저에서 캐시 사용법을 찾아봅시다. Google 검색에서 브라우저 이름과 캐시 삭제 방법으로 검색하면 바로 찾을 수 있을 것입니다.

Google 애널리틱스, 서치 콘솔

여러 번 말했듯이, 홈페이지는 만들기만 해서는 의미가 없습니다. 사용자가 사이트에 방문한 후 어떻게 이동하는지, 어떤 페이지가 자주 보이고, 반대로 어떤 페이지가 흥미를 끌지 못하는지, 세부적으로 접근 데이터를 수집하여 조사할 필요가 있습니다.

그때 유용한 것이 Google 애널리틱스입니다. Google 애널리틱스를 설치하면 수많은 접근 데이터를 얻을 수 있습니다. 그 데이터를 분석하면 자연스럽게 페이지를 어떻게 개선해야 할지도 알게 될 것입니다.

또한, 서치 콘솔이라는 도구가 하나 더 있습니다. 이것도 Google이 제공하는 것으로, 검색 엔진에서 어떤 키워드로 사이트에 접근하는지, 그리고 어떤 페이지가 몇 번째로 표시되는지 등 검색에 관한 다양한 정보를 얻을 수 있습니다. SEO를 위한 도구이죠.

서치 콘솔로 검색 엔진에 대한 대책을 세우고, Google 애널리틱스로 사이트 내에서 헤매지 않도록, 이해하기 쉽도록, 그리고 사용자의 흥미를 끌도록 수정을 가합니다. 이 두 가지는 홈페이지에 반드시 포함하는 것이 좋습니다.

반응형 디자인

원래 스마트폰용 홈페이지와 PC용 홈페이지는 별도로 제작되었습니다. 그런데 HTML과 CSS가 발전함에 따라 하나의 파일로도 화면의 가로 폭에 따라 레이아웃을 다르게 표시할 수 있게 되었습니다. 그것이 반응형 디자인입니다. 반응형 디자인은 파일을 별도로 제작하는 것보다 복잡한 작업은 할 수 없지만, 대부분의 사이트는 반응형 디자인으로 커버할 수 있게 되었습니다. 제작 비용과 기간도 절감할 수 있습니다.

현재는 특별한 경우가 아니라면 스마트폰용 사이트와 PC용 사이트를 별도로 만들지 않습니다. 반응형 디자인으로, 즉 동일한 파일 내에서 화면의 가로 폭에 따라 가변하는 형태로 제작하는 것이 일반적입니다. 이 용어는 크리에이터 측과의 커뮤니케이션에서도 자주 사용되므로, 기억해 두면 원활하게 대화를 진행할 수 있을 것입니다.

요약

웹사이트 제작은 "제작 파트너에게 전적으로 맡기면 최고의 사이트가 만들어진다"는 것이 아닙니다. 클라이언트께서는 자신이 속한 업계의 전문가 시각으로 사이트를 확인해야 합니다. 특히 사용자 관점에서 사이트에 대해 생각하고, 크리에이터는 웹사이트 전문가 관점에서 최고의 웹사이트를 목표로 해야 비로소 최적의 웹사이트가 완성됩니다.

예를 들어 집을 지을 때, 모든 것을 맡긴다고 해서 자신들의 생활에 가장 적합한 집이 지어지는 것은 아닙니다. 우리에게는 우리만의 생활 방식이 있으므로, 건축가에게 우리 생활의 모습을 전달하고 논의하지 않으면, 정말 원하는 집은 완성되지 않을 것입니다. 웹사이트도 마찬가지입니다.

물론 시간과 예산이 있다면, 웹 제작 파트너도 업계를 철저히 조사하고, 무엇이 최선의 길인지 확신을 가진 후에 제작할 수 있을 것입니다. 하지만 그렇게까지 조사를 심층적으로 한다면, 웹사이트 하나를 만드는 데 막대한 비용이 필요하게 될 것입니다.

그러므로 가능한 한 클라이언트로서 발주하는 경우에도 완전히 전적으로 맡기지 말고, 자신들의 관점에서 적극적으로 논의하고 정보를 제공해야 합니다. 그것이야말로 웹 제작 프로젝트를 성공시키는 비결입니다.