디지털 웹 에이전시 비쥬얼스토리 포트폴리오 | 반응형 웹 사이트 구축, 반응형 홈페에지 제작, 반응형 웹 사이트 제작, 반응형 홈페이지 구축

 

홈페이지를 성공적으로 제작하기 위해서는 다양한 항목들을 점검해야 합니다. 기본적인 디자인과 프로그래밍 뿐 아니라 마케팅, SEO, 콘텐츠 등 다양한 부분들도 점검해야 합니다. 이를 통해 완벽한 홈페이지를 구현할 수 있습니다.

 

1. 도메인 등록과 관리

2. 호스팅 서비스 선택과 설정

3. 디자인: 웹 사이트의 외관과 레이아웃 결정

4. 개발: 프로그래밍 언어와 기술을 사용하여 웹 사이트 제작

5. 네비게이션과 UI 디자인: 사용자 경험을 개선하는 중요한 요소

6. 메인화면(index page) 디자인: 방문자를 유지하고 끌어들이는 첫인상을 결정

7. 콘텐츠 제작과 관리: 유익하고 흥미로운 콘텐츠를 만들어 사용자를 유치

8. 마케팅 전략: 사이트를 홍보하고 방문자를 유치하는 전략과 방법

9. 검색 엔진 최적화(SEO): 검색 엔진에서 웹 사이트를 노출시키는 기술과 전략

10. 호환성과 크로스 브라우징: 다양한 브라우저와 기기에서 웹 사이트의 동작을 보장하는 기술

11. 모바일 버전 vs 반응형 웹: 모바일 사용자에게 최적화된 웹 사이트 제작 방법

12. 이미지와 폰트 저작권: 저작권 문제를 고려하여 이미지와 폰트 선택과 사용

13. 제작 후 점검사항: 웹 사이트 오류 및 보안 문제 등을 체크하여 유지보수

14. 예산과 비용 관리: 제작, 유지보수, 마케팅 등의 비용을 효율적으로 관리하기 위한 전략

 

1) 도메인

 

도메인은 인터넷 상에서 고유한 식별자 역할을 합니다. 따라서, 홈페이지를 만들기 전에는 적절한 도메인을 선택해야 합니다.

 

도메인은 짧고 외우기 쉬운 것이 좋습니다. 또한, 최상위 도메인은 .com 혹은 .co.kr을 사용하는 것이 일반적입니다. 도메인에는 해당 사이트의 핵심 키워드를 포함시키는 것이 좋습니다. 이를 통해 방문자들은 도메인만으로 해당 사이트의 내용을 예측할 수 있으며, 검색 엔진에서도 해당 키워드와 관련된 검색어에 대해 노출될 가능성이 높아집니다.

 

또한, 하위 경로에도 키워드를 포함시키는 것이 좋습니다. 이를 통해 폴더(경로)명을 통해 해당 사이트의 카테고리와 현재 위치를 파악할 수 있으며, 검색 엔진에서도 해당 키워드와 관련된 검색어에 대해 노출될 가능성이 높아집니다.

 

마지막으로, URL scheme이 의미론적이어야 합니다. 즉, 카테고리명과 폴더명이 같아야 하며, 모두 연관성 있는 키워드를 적용해야 합니다. 또한, 가급적 하이픈(-)이나 숫자는 포함시키지 않는 것이 좋습니다.

 

2) 서버 및 호스팅

 

호스팅 서비스를 선택할 때는 속도와 안정성을 우선적으로 고려해야 합니다. 개발 및 운영에 필요한 기능, 프로그램 지원, 부가 서비스 등도 고려해야 합니다. UTF-8 문자셋을 사용하여 다국어 제작을 할 것을 권장합니다. 호스팅 서비스는 자동 백업 기능을 제공하고, 회선 속도 및 로딩 속도도 고려해야 합니다. 서버 OS 버전, 지원 프로그램, DB 환경, 이메일 계정 지원 여부 등도 개발 및 운영 환경에 따른 고려가 필요합니다. 이외에도, 서버의 성능, 가용성, 보안, 서버 유형, 기술 지원, 가격 등을 고려하여 적절한 서버를 선택해야 합니다.

 

성능: 서버가 가지는 하드웨어 및 네트워크 구성이 웹 사이트의 성능에 영향을 미치므로, 적절한 성능을 가진 서버를 선택해야 합니다.

 

가용성: 서버의 가용성이 높을수록 웹 사이트의 가동 시간이 더 길어집니다. 따라서 이에 대한 보증을 확인하고, 서비스 장애 시 신속하게 대처할 수 있는 백업과 복구 계획이 필요합니다.

 

보안: 웹 서버에 저장되는 정보가 많으므로 보안은 매우 중요합니다. 서버가 가지는 보안 기능이나 보안 업데이트 정책 등을 확인하고 적절한 대책을 마련해야 합니다.

 

서버 유형: 클라우드 서버, 전용 서버, 공유 서버 등 다양한 유형의 서버가 있으므로, 웹 사이트의 규모와 요구사항에 맞게 적절한 서버를 선택해야 합니다.

 

기술 지원: 서버 관리나 문제 해결에 대한 기술 지원이 필요하므로, 웹 서버 제공업체가 어떤 기술 지원을 제공하는지 확인해야 합니다.

 

가격: 서버 가격은 중요한 선택 기준 중 하나입니다. 비용 대비 최대한 효율적인 서버 선택이 필요합니다.

 

 

3) 디자인

 

웹 디자인에서는 시각적인 아름다움과 함께 정보전달과 편의성을 고려해야 합니다. 이를 위해 이미지 요소의 질이 높을수록 좋으며, 사진, 일러스5) 네비게이션 & UI(User Interface)트, 아이콘, 타이포그래피 등을 포함합니다. 또한, 디자인 컨셉이 사이트 목적에 부합하는지를 명확히 규정하고, 중요한 요소들이 눈에 잘 띄도록 해야 합니다. 특히, 중요한 요소일수록 크기가 커야 하며, 강렬한 색상으로 표현되어야 합니다. 색상 테마와 강조 색상 규칙이 일관되게 적용되고, 링크가 걸린 텍스트가 시각적으로 강조되어야 합니다. 마지막으로, 텍스트의 가독성과 중요 문장들의 시각적 부각이 충분히 고려되어야 합니다.

 

4) 프로그래밍 개발

 

웹 프로그래밍 언어를 선택할 때는 사이트의 규모와 운영 목적을 고려해야 합니다.

 

만약 기능이 필요 없이 단순히 이미지와 글을 보여주는 정도라면 HTML만으로 제작이 가능합니다. 그러나 기능(게시판, 회원제 등)이 요구되는 경우에는 적합한 개발 언어를 선택해야 합니다.

 

일반적으로 사용되는 언어들(PHP, ASP, Java 등)은 기능과 보안 측면에서 치명적인 취약점을 가지지 않습니다. 비용이 적게 드는 PHP의 경우 상대적으로 기능과 보안에 취약점이 있다고 알려져 있습니다. 그러나 야후, 페이스북, 워드프레스 등 대규모 사이트 제작에도 사용되고 있습니다.

 

따라서 웹 프로그래밍 언어를 선택할 때는 사이트의 규모, 기능 요구 사항, 보안 요건, 유지 보수성 등을 고려하여 적합한 언어를 선택해야 합니다.

 

5) 네비게이션 & UI(User Interface)

 

웹 사이트의 네비게이션과 UI(User Interface)는 사용자 편의성에 중요한 역할을 합니다. 사용자 입장에서 쉽게 원하는 화면으로 이동할 수 있어야 하며, 필요한 정보를 직관적으로 발견할 수 있어야 합니다. 따라서 네비게이션과 UI는 반드시 사용자 입장에서 철저하게 체크되어야 합니다.

 

UI의 기본 원칙은 일반적으로 통용되는 방식을 따르는 것이 좋습니다. 예를 들어 로그아웃 버튼은 대부분의 사이트에서 화면 상단에 위치합니다. 만약 이러한 원칙을 어긴다면 사용자는 로그아웃 버튼을 찾아 헤맨 시간만큼 이 사이트를 싫어하게 됩니다.

 

네비게이션의 메뉴명이 정확한 의미를 보여주어야 합니다. 메뉴명이 불분명하면 클릭률이 떨어지므로, 메뉴명의 의미를 명확히 해주는 것이 좋습니다. 마찬가지로 링크가 걸려 있는 텍스트(앵커텍스트)도 의미가 명확해야 클릭률이 높아집니다.

 

네비게이션 구조와 카테고리 구조는 직관적이고 논리적이어야 합니다. 이미지나 플래쉬로 되어 있는 네비게이션의 경우 하단쪽에 사이트 전체에 대한 텍스트 링크를 제공하는 것이 좋습니다. 또한 각 페이지마다 제목 바로 밑에 현재 위치(bread crumbs)가 표시되어 있는지 확인해야 합니다.

 

사이트 내 검색 기능이 제공되어야 하며, 깨진 링크나 없는 페이지에 접속하려는 경우 404 페이지를 제공하여 대체 페이지나 메인페이지로의 링크를 제공하는 것이 좋습니다. 아크로뱃이나 어도비, 자바 등의 미디어 재생을 위해 플러그인이나 응용프로그램이 필요한 경우 해당 프로그램의 링크를 걸어 주어야 합니다.

 

텍스트 위주의 콘텐츠인 경우 본문에 대한 ‘인쇄’ 버튼을 제공하는 것이 좋으며, 사이트맵을 제공할 경우 가급적 이미지가 아닌 텍스트 링크를 사용하는 것이 SEO에 유리합니다. 마지막으로 사이트 규모가 클 경우 ‘사이트 내 검색’ 기능을 포함시켜야 합니다.

 

6) 메인화면(index page)

 

메인페이지는 사이트 내용을 요약하면서도 구성이 간결한 것이 좋습니다. 그러나 화면 구성이 반드시 간결해야 하는 것은 아니며, 방문 목적에 맞는 항목들을 다양하게 구성하는 것이 더 효율적입니다.

 

예를 들어, 방문 목적이 상담이라면 상담 전화번호가 표시되어야 하며, 구매가 목적이라면 주요 제품에 대한 바로구매 버튼이 있어야 합니다. 이벤트 참여나 배송 정보 등 다양한 목적이 있다면, 해당 목적에 맞는 내용이 보여지도록 구성하는 것이 좋습니다.

 

또한, 메인화면이 간결한 경우는 방문자들의 목적이 거의 한쪽으로 편중된 경우입니다. 신규 방문자를 위해서는 '우리가 누구이고', '무슨 일을 하며', '무엇을 제공할 것인지'를 알려주는 것이 좋습니다. 메인페이지에서 중요한 페이지로 연결되는 링크를 시각적으로 부각시켜야 하며, index page (메인페이지)만 보고도 사이트의 주요 내용을 알 수 있도록 명확한 메시지를 전달하는 것이 중요합니다.

 

7) 콘텐츠 페이지

 

대부분의 온라인 콘텐츠는 텍스트로 이루어져 있으며, 이미지와 영상은 부가적인 역할을 합니다. 따라서 좋은 정보를 담고 있는 질 좋은 글은 웹사이트 방문자들을 유치하는 데 중요합니다. 간결하면서도 정확한 정보를 전달하며, 문단, 제목, 소제목, 강조 문구 등은 정보를 요약하여 전달해야 합니다. 인용문이나 링크를 통해 정보나 주장에 대한 근거를 제공하는 것도 좋습니다. 또한 소셜 공유나 RSS 피드를 활용하여 콘텐츠를 전파할 수 있습니다. 사이트 내에서 블로그를 운영할 경우, 같은 도메인과 인터페이스를 가지는 것이 유리하며, 블로그 방문자를 웹사이트 방문자로 전환시키는 데도 도움이 됩니다. 마케팅 측면에서는 네이버 블로그가 사이트 내 블로그보다 유리하지만, 구글 상위 노출에는 사이트 내 블로그가 더 유리합니다.

 

8) 웹 사이트 마케팅

 

웹사이트에서 마케팅 요소들을 적절하게 배치하여 방문자가 웹사이트를 주변에 알리거나 제품을 구매하도록 유도할 수 있습니다. 콜투액션과 고객에게 신뢰를 주는 내용이 이 역할을 합니다. 따라서 고객의 기대행동을 분명하게 제시하고, 검색결과에 흥미로운 문구를 작성하여 클릭을 유도하며, 고객의 피드백 창구가 충분하도록 구성해야 합니다. 또한 주소, 연락처, 블로그, 소셜, 회원증, 인증서, 수상경력, 연혁, 거래처, 협력사, 연도별 실적, 포트폴리오 등 신뢰를 줄 수 있는 항목을 누락시키지 않아야 합니다. 즐겨찾기 버튼, 파비콘, SNS 공유 버튼도 적절하게 배치해야 하며, 구글/빙 웹마스터 도구 등록, 네이버/다음 사이트 등록, 구글 애널리틱스 등록, RSS피드 등록도 필요합니다. 또한 홈페이지빌더로 제작할 경우 sitemap.xml 파일 업로드나 로그분석, 전환추적을 위한 스크립트의 삽입을 제한하고 있는지 확인할 필요가 있습니다.

 

콜 투 액션(call to action) 요소 배치: 버튼, 아이콘, 링크, 네비게이션 등을 이용하여 고객의 행동을 유도하는 장치를 제공해야 합니다.

 

페이지 타이틀과 도입부 작성: 검색 결과에 제목과 미리보기 형태로 보여지므로, 흥미로운 문구를 작성하여 클릭을 유도할 수 있도록 합니다.

 

고객 피드백 창구 제공: 고객의 의견이나 문의사항을 적극적으로 수용하고, 답변하는 창구를 마련하여 고객 만족도를 높입니다.

 

신뢰성 있는 내용 제공: 주소, 연락처, 블로그, 소셜 미디어, 회원증, 인증서, 수상 경력, 연혁, 거래처, 협력사, 연도별 실적, 포트폴리오 등을 제공하여 신뢰성을 높이는 데 중요합니다.

 

즐겨찾기 버튼 제공: 직접 방문자가 많은 경우 검색 엔진 상위 노출에 유리하므로 즐겨찾기 버튼을 제공하여 즐겨찾기 등록을 유도합니다.

 

파비콘 제공: 즐겨찾기 목록에서 파비콘은 시각적으로 두드러지고 사이트의 존재감을 높입니다.

 

SNS 공유 버튼 제공: 공유 버튼을 제공하여 방문자가 쉽게 공유할 수 있도록 합니다.

 

검색 엔진 및 포털 등록: 구글, 빙 웹마스터 도구 등록, 네이버, 다음 사이트 등록을 통해 검색 엔진에 등록하여 검색 노출을 높이고, 포털에 등록하여 노출을 늘립니다.

 

웹 로그 분석: 검색 엔진, 포털 등록 이후 웹 로그 분석을 통해 방문자 동향을 파악하여 매출을 늘리는 전략을 수립합니다.

 

 

9) SEO (검색엔진최적화)

 

검색 엔진 최적화를 위해 기술적인 요소들인 title과 h1 태그에 연관성 있는 키워드를 포함하고, 키워드 연구와 메타태그, semantic markup(h1 등), sitemap.xml, robots.txt, alt 태그, 그리고 구글 웹마스터도구와 구글 애널리틱스 등을 활용할 수 있습니다. 하지만, 더욱 중요한 것은 콘텐츠의 질과 홍보입니다. 따라서 양질의 콘텐츠를 생성하고 연관성 있는 사이트에 링크를 퍼뜨린 후, 다른 매체에 재활용하는 것이 필요합니다. 블로그의 경우에는 구글 대상 블로그(워드프레스)와 네이버 대상 블로그(네이버 블로그)를 같이 운영하고, 중복 게재하는 것이 효과적입니다.

 

10) 웹사이트 호환성 체크: 크로스 브라우저 및 디바이스 호환성 유지하기

 

웹 브라우저 호환성은 웹사이트가 다양한 브라우저에서 정상적으로 작동하고 보여지는 것을 말합니다. 각 브라우저마다 렌더링 방식, CSS 지원, 자바스크립트 처리 방식 등이 다르기 때문에, 같은 웹사이트임에도 다른 브라우저에서는 화면이 깨지거나 기능이 동작하지 않는 등의 문제가 발생할 수 있습니다.

 

따라서, 웹사이트를 개발할 때는 여러 브라우저에서 테스트를 하여 호환성을 체크해야 합니다. 이를 위해 대표적인 브라우저인 Chrome, Firefox, Safari, Internet Explorer 등에서 웹사이트가 올바르게 작동하는지 확인하는 것이 필요합니다.

 

또한, 최근에는 모바일 기기에서도 웹사이트를 이용하는 비중이 증가하면서, 크로스 디바이스 호환성도 중요한 이슈가 되었습니다. 다양한 크기와 해상도를 가지는 모바일 기기에서도 웹사이트가 올바르게 보여지고 사용자가 원하는 기능을 제공해야 합니다.

 

따라서, 웹사이트를 개발할 때는 다양한 브라우저와 디바이스에서 테스트를 하여 호환성을 체크하고, 필요에 따라 CSS 미디어 쿼리 등을 활용하여 브라우저나 디바이스에 따라 적절한 레이아웃과 디자인을 제공해야 합니다.

 

 

11) 반응형웹 VS 적응형 웹

 

반응형 웹과 적응형 웹은 모바일 장치에서 웹 사이트를 볼 때 화면 해상도에 맞춰 자동으로 UI, 레이아웃, 콘텐츠 등을 최적화하여 보여주는 웹 디자인 방식입니다. 하지만 두 방식은 다른 원리로 작동합니다.

 

반응형 웹은 하나의 HTML 코드와 하나의 CSS 파일을 사용하여 모든 기기에서 일관된 디자인을 제공합니다. 모든 요소들은 유동적으로 조정되어 크기와 위치가 변경됩니다. 따라서 기기의 화면 크기가 변경될 때마다 모든 요소가 유연하게 변형되며, 하나의 코드가 모든 장치에 적용됩니다.

 

반면, 적응형 웹은 기기별로 HTML 코드와 CSS 파일이 구분되어 있습니다. 즉, 디바이스 종류에 따라 여러 개의 레이아웃과 CSS 파일을 각각 사용합니다. 이 방식은 각각의 디바이스에 맞는 레이아웃이 미리 정해져 있기 때문에 사용자에게 더 빠른 로딩 속도와 더 나은 사용자 경험을 제공합니다.

 

따라서 반응형 웹은 하나의 코드로 모든 장치에서 일관된 사용자 경험을 제공할 수 있지만, 적응형 웹은 각각의 장치에 맞는 레이아웃과 CSS 파일이 있기 때문에 더 빠른 로딩 속도와 사용자 경험을 제공할 수 있습니다. 다만, PC 버전과는 별도로 제작하고 운영해야 하는 단점이 있습니다.

 

12) 폰트 및 이미지 저작권

 

폰트 및 이미지 저작권은 그 작품의 창작자에게 있으며, 무단으로 사용 시 저작권 위반이 되어 법적 문제가 발생할 수 있습니다. 따라서 웹사이트나 디자인 작업 등에서 폰트와 이미지를 사용할 때는 이에 대한 저작권과 사용권을 확인하는 것이 중요합니다.

 

특히 상업적인 목적으로 사용할 경우 저작권 침해가 더욱 심각한 문제가 될 수 있습니다. 따라서 상업적 목적의 작업에서는 무료로 사용 가능한 폰트나 이미지를 사용하거나, 사용 권한이 있는 저작물을 이용해야 합니다.

 

또한, 웹사이트나 디자인 작업 등을 수행할 때에는 계약서에 저작권과 사용권에 대한 내용을 포함시켜야 합니다. 이를 통해 만약 문제가 발생할 경우 이에 대한 책임을 미리 명확하게 하여 불필요한 분쟁을 예방할 수 있습니다.

 

13) 홈페이지 제작 후 점검사항

 

웹 사이트 제작 후, 오픈하기 전 마지막으로 링크, 기능, 맞춤법 등을 체크하는 시간을 가지는 것이 좋습니다. 이 단계에서 구성이나 콘텐츠를 크게 수정하는 것은 지양해야 합니다. 이후에도 수정할 기회는 충분히 있기 때문입니다.

 

점검해야 할 사항으로는 다음과 같습니다.

 

· 깨진 링크가 없는지 확인

· 메일로 연결되는 링크의 메일 주소, 통화로 연결되는 링크의 전화번호 확인

· 기능 요소들이 정상 작동하는지 확인 (게시판, 입력 폼, 예약 등)

· JavaScript 에러 체크

· 호환성 체크: 브라우저, 디바이스, 운영체제, 해상도 등

· 맞춤법 체크: 국문 맞춤법 및 문법 체크, 영문 스펠링 체크

· 크롬 브라우저를 사용할 경우, 바른 말씨와 Spell Checker for Chrome 등의 확장 프로그램을 설치하여 맞춤법과 스펠링을 체크할 수 있습니다.

 

 

14) 예산 및 비용 책정

 

· 디자인 비용

 

- 이미지 구매 비용은 제작업체가 보유한 라이센스에 따라 달라진다.

- 제작업체가 외주 작업용 라이센스를 가지고 라이센스 범위 내에서 작업하는 경우 비용은 발생하지 않는다.

- 제작업체의 외주 작업용 라이센스 외에 다른 이미지를 사용할 경우, 이미지의 라이센스에 따라 비용이 발생한다.

- 이미지 라이센스에 대한 자세한 설명은 [여기](https://www.guruaid.com/posts/5177)를 참조

 

· 개발(프로그래밍) 비용

 

- 기능요소가 포함된 경우 개발비용이 발생한다.

- 기능요소 없이 단순히 정보전달이 목적이라면 개발비용은 발생하지 않는다.

- 기능요소의 비중이 적고 특별한 기능이 요구되지 않을 경우, 오픈소스나 홈페이지빌더를 활용해서 개발할 수 있다.

 

· 기획/콘텐츠 제작 비용

 

- 소규모 프로젝트에서는 작업인원 중 일부가 업무와 상관없이 처리하기도 하지만 규모가 커지면 전문 기획자, 콘텐츠 제작자가 참여해야 한다.

 

· SEO(검색엔진최적화)

 

- SEO 없이도 홈페이지를 완성할 수 있다.

- SEO가 반영되면 마케팅이 강화된다.

- SEO마케팅, 콘텐츠마케팅, 바이럴마케팅 등을 고려할 수 있다.

- 프로젝트 종료 후 SEO를 반영할 경우 적지않은 비용이 발생하므로, SEO 계획이 있다면 제작단계에서 진행하는 것이 좋다.

 

· SEO 작업 중 홈페이지 제작과 연계되는 것들

 

- 도메인, 하위 폴더

- 카테고리명

- 콘텐츠에 사용되는 키워드, 키프레이즈

- 각종 tag의 값 예)keyword, description, title, img

 

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

 

 

 

www.visualstory.co.kr  

디지털 웹 에이전시 비쥬얼스토리 포트폴리오 | 반응형 웹 사이트 구축, 반응형 홈페에지 제작,

 

​

"비쥬얼스토리"는 디지털 웹 에이전시로 23년의 경험을 갖고 있으며, 반응형 웹 사이트 구축, 반응형 홈페이지 제작, 모바일 앱 개발, 온라인 마케팅, 브랜딩(로고 제작), 동영상 제작, SNS 마케팅 등 다양한 디지털 마케팅 서비스를 제공합니다. 국내외 다양한 기업 및 기관과 협업하여 다양한 프로젝트를 수행하며, 전문성과 창의성을 바탕으로 최적화된 디지털 마케팅 전략을 제공하는 것을 목표로 합니다. 고객들의 비즈니스 목표를 이해하고, 새로운 아이디어와 창의적인 디자인으로 고객들의 요구에 맞는 솔루션을 제공하여, 고객들의 비즈니스 성공에 기여하고 있습니다.