바리스타요셉의 삶 속에서 기록하고 전하는 이런 저런 이야기들
광고부분 양해 바랍니다.

 

웹사이트제작 10

웹사이트 리뉴얼 이야기 - 10. 마치며...

본 이야기는 지인의 기업용 홈페이지의 리뉴얼을 의뢰받아서 진행하는 과정을 적은 내용이며, 가비아 크리에이터링크 서비스를 이용해서 제작하였습니다. 지인 회사 웹사이트 리뉴얼 이야기의 마지막입니다. 드디어 마지막 이야기입니다. 이것으로 웹사이트 완성~~~!! 이라고 외치면 좋겠지만 실상은 그렇지 않습니다. ^^ 아직 수정/보완해야 할 부분이 많고 영문 페이지도 만들어야 되거든요. 영문 페이지 만드는 과정은 생략하니 양해 바랍니다. 그냥 영문 버튼 눌러 지금까지 했던 작업을 동일하게 수행하면 됩니다. 단, 한글이 아닌 영어로 다 입력해야 하는 차이뿐입니다. 이번 이야기 과정에서 빠진 부분이 있습니다. 바로 '시안 작업'입니다. 보통은 웹사이트를 제작하기 전에 시안 작업이라는 것을 먼저 하게 됩니다. 어떤 형태..

웹사이트 리뉴얼 이야기 - 9. INTRO 페이지

본 이야기는 지인의 기업용 홈페이지의 리뉴얼을 의뢰받아서 진행하는 과정을 적은 내용이며, 가비아 크리에이터링크 서비스를 이용해서 제작하였습니다. 지인 회사 웹사이트 리뉴얼 이야기는 계속 이어집니다. INTRO 페이지 흔히 인덱스(INDEX) 페이지하고 하는 웹사이트 처음 접속하면 보이는 첫 페이지입니다. 그동안 만든 콘텐츠도 이용하고 새로운 요소도 추가하여 꾸며 보도록 하겠습니다. 1. 상단 슬라이드 이미지 블록 추가 - 이 부분은 인사말 페이지 제작할 때 만들어 두었던 것을 그대로 옮겨 두었습니다. 특별히 손 델 부분은 없을 듯하여 그냥 유지하도록 하겠습니다. 나중에 수정/보완할 때 좌우 폭이나 이미지와 텍스트 교체 정도는 이루어질 수 있습니다. 2. 구분선 추가 구분선이 차지하는 부분이 좀 큰 듯하여..

웹사이트 리뉴얼 이야기 - 8. 제품문의 페이지

본 이야기는 지인의 기업용 홈페이지의 리뉴얼을 의뢰받아서 진행하는 과정을 적은 내용이며, 가비아 크리에이터링크 서비스를 이용해서 제작하였습니다. 지인 회사 웹사이트 리뉴얼 이야기는 계속 이어 집니다. 제품문의 페이지 제품문의 페이지에는 간단하게 전화번호와 이메일만 나오면 되므로 페이지 자체를 이미지로 만들어 올리겠습니다. 1. 이미지 편집하기 1.1 관련 이미지를 freepik.com 에서 다운로드 받습니다. 1.2 다운로드 받은 이미지를 활용하여 적당하게 편집 합니다. 2. 이미지 넣을 블럭 추가 이미지 블럭 중 맨 아래에 보면 하나의 이미지만 있는 블럭을 선택하여 넣습니다. 3. 이미지 교체하기 이미지위에 마우스 포인터를 올리면 두 개의 아이콘이 나옵니다. 그 중 EDIT 아이콘을 누릅니다. 이미지 ..

웹사이트 리뉴얼 이야기 - 7. 공지사항 페이지

본 이야기는 지인의 기업용 홈페이지의 리뉴얼을 의뢰받아서 진행하는 과정을 적은 내용이며, 가비아 크리에이터링크 서비스를 이용해서 제작하였습니다. 지인 회사 홈페이지 리뉴얼 이야기는 계속 이어집니다. 공지사항 게시판 가비아 크리에이터링크 서비스에서 기본적으로 게시판 시스템을 지원하여 줍니다. 단, 베이직 계정에서는 회원제로 게시판 운영은 안됩니다. 의뢰 업체는 관리자가 공지사항만 올리면 되므로 회원제가 필요 없어서 베이직 계정으로 등록하였습니다. 1. 타이틀 블럭 추가 - 제품소개 페이지처럼 인사말 페이지의 타이틀블럭을 복사해 와서 수정합니다. 인사말 타이틀 블럭을 복사 하였습니다. . 복사한 블럭을 이동 후 [저장] 버튼을 누릅니다. . 인사말 글자를 공지사항으로 수정하였습니다. 2. 공지사항 게시판 설..

웹사이트 리뉴얼 이야기 - 6. 제품소개 페이지

본 이야기는 지인의 기업용 홈페이지의 리뉴얼을 의뢰받아서 진행하는 과정을 적은 내용이며, 가비아 크리에이터링크 서비스를 이용해서 제작하였습니다. 지인 회사 웹사이트 리뉴얼 이야기는 계속 이어 집니다. 제품소개 페이지 1. 상단 타이틀 만들기 - 인사말 페이지에 만들어 놓은 타이틀을 복사해서 사용하도록 하겠습니다. - 인사말 페이지의 타이틀 블럭 설정 버튼을 눌러 '블럭복제' 를 누릅니다. - 다시 타이틀블럭 설정버튼 눌러서 '블럭이동' 을 누릅니다. - '블럭 이동' 창이 뜨면 복제된 타이틀 블럭을 드래그 하여 '제품소개' 페이지 쪽으로 옮깁니다. - [저장] 버튼을 누르면 '블럭 이동' 창이 닫힙니다. - '제품소개' 페이지로 이동한 후 타이틀 글자를 '제품소개' 로 변경합니다. 2. 타이틀과 내용 이..

웹사이트 리뉴얼 이야기 - 5. 오시는길 페이지

본 이야기는 지인의 기업용 홈페이지의 리뉴얼을 의뢰받아서 진행하는 과정을 적은 내용이며, 가비아 크리에이터링크 서비스를 이용해서 제작하였습니다. 지인 회사 웹사이트 리뉴얼 이야기는 계속 이어집니다. 전하는 말 인사말 페이지 제작 후 다듬는 과정에서 메뉴 시스템을 하위(서브) 메뉴 방식으로 변경하였습니다. 오시는 길 페이지 제작 위치정보를 알려주는 블럭은 '컨택트' 라는 것을 이용하면 됩니다만 구글맵이 연동됩니다. 네이버맵이나 다음 카카오맵을 연동하는 방법에 대해서는 알아보아야 되겠습니다. 1. 상단 타이틀 블럭 추가 1.1 오시는 길 페이지 들어가기 - 사이트메뉴 중 '오시는길' 메뉴 선택하여 해당 페이지 열기 1.2 상단 타이틀 구성 - 이 페이지도 인사말과 같이 심플하게 구성하려고 하였으나 구글맵 표..

웹사이트 리뉴얼 이야기 - 4. 인사말 페이지

본 이야기는 지인의 기업용 홈페이지의 리뉴얼을 의뢰받아서 진행하는 과정을 적은 내용이며, 가비아 크리에이터링크 서비스를 이용해서 제작하였습니다. 지인 회사 웹사이트 리뉴얼 이야기는 계속 이어집니다. 인사말 페이지 제작 가비아 크리에이터링크에서 각 페이지를 제작/수정하는 작업은 마치 문서를 편집하는 것처럼 쉽게 되어 있습니다. 물론 적응하면 말입니다. 페이지 수정하는 방법은 사이트 편집 화면에서 실제 사이트 메뉴를 클릭하면 해당 페이지가 열리게 되고 거기에서 원하는 구성요소를 블럭처럼 쌓는 느낌으로 쌓고 배열한 후 내용을 적절하게 수정하면 됩니다. 즉, 인사말 페이지를 편집/수정하기 위해서 단지 '인사말' 메뉴를 클릭하세요. 그다음은 원하는 구성요소(블럭)를 추가하세요. 1. 인사말 페이지 열기 - '사이..

웹사이트 리뉴얼 이야기 - 3. 이미지/폰트 라이센스 확인

본 이야기는 지인의 기업용 홈페이지의 리뉴얼을 의뢰받아서 진행하는 과정을 적은 내용이며, 가비아 크리에이터링크 서비스를 이용해서 제작하였습니다. 지인 회사 웹사이트 리뉴얼 이야기는 계속 이어집니다. 제작 시작하기 전에 중요한 부분을 말씀드리겠습니다. 웹사이트 제작에 사용하는 폰트와 이미지는 항상 라이센스 부분을 확인해야 됩니다. 그냥 인터넷 검색해서 마음에 드는 이미지나 폰트를 사용했다가 라이센스 위반으로 나중에 엄청난 벌금을 무담해야 하는 상황이 올 수 있습니다. 이미지 참조 사이트 및 라이센스 정책 확인 pixabay.com pixabay에 올려진 이미지는 라이센스 표기 없이 상업적으로 사용해도 아무런 문제가 없습니다. freepik.com freepik의 이미지는 저작권 표시(저작자 또는 freep..

웹사이트 리뉴얼 이야기 - 2. 가비아 가입과 사이트 기본설정

본 이야기는 지인의 기업용 홈페이지의 리뉴얼을 의뢰받아서 진행하는 과정을 적은 내용이며, 가비아 크리에이터링크 서비스를 이용해서 제작하였습니다. 지인 회사의 웹사이트 리뉴얼 이야기는 계속 이어집니다. 이번 이야기에서 다루는 내용 가비아 가입 및 크리에이터링크 생성하기 유료계정 전환하기 사이트 기본 설정하기 - 사이트 메타태그 설정, 사이트이름 설정, 파비콘 등록, 폰트지정, 메뉴등록, 메뉴디자인변경, 사이트로고 설정, 푸터 변경 등 가비아 가입 및 크리에이터링크 생성 저는 가비아와 아무런 관련이 없으며 이번 웹사이트 리뉴얼을 의뢰 받은 후 적당한 곳을 검색하던 중 가비아의 크리에이터링크 서비스를 알게되어 선택하였을 뿐 입니다. 가비아 크리에이터링크 가입방법 1. 가비아(https://gabia.co.kr..

웹사이트 리뉴얼 이야기 - 1. 시작하기 전에...

본 이야기는 지인의 기업용 홈페이지의 리뉴얼을 의뢰받아서 진행하는 과정을 적은 내용이며, 가비아 크리에이터링크 서비스를 이용해서 제작하였습니다. 대표이미지출처 : https://www.freepik.com/free-vector/web-design-landing-page-template_5061659.htm 시작하기 전에... 예전에 사진 동호회 같이 활동하던 지인께서 오랜만에 연락하시더니 근무하시는 회사의 웹사이트 리뉴얼을 부탁하셨습니다. 기존 웹사이트는 제작한지도 오래되었고 플래시 컨텐츠가 많다 보니 플레시 서비스가 종료된 요즘 사이트가 정상적으로 안 떠서 지장이 많은 듯합니다. 메뉴조차 플래시로 되어 있으니... 특히 모바일 페이지가 지원되지 않아서 시대에 뒤처지는 경향도 있는 듯하고요. 아직 제작해..