본문 바로가기

_

무료 홈페이지 제작 사이트 소개

 

안녕하세요, 자바입니다.

과거, 인터넷이 등장하기 전에는 가게를 홍보하려면 전단지나 신문, 라디오, TV 등을 이용해

제한된 시간동안 제한된 내용만을 전달해야 했습니다.

하지만, 현재는 인터넷 내의 공간에서 자신의 페이지를 만들어 이야기하고 싶은 것들을 마음껏 뽐낼 수 있게 되었습니다.

즉, 홈페이지를 통해 세계 곳곳에 이야기를 전달할 수 있게 된 것입니다.

 

홈페이지의 사전적 정의는 다음과 같습니다.

홈페이지 Homepage 또는 메인 페이지 Main Page : 정보 제공자가 그 정보에 대한 목록이나 안내 등을 제시해 놓은 것으로, 그 화면이 안내하는 구체적 정보를 말한다. (ex) 인터넷 브라우저 (Chrome 등) 실행 시 나타나는 웹 페이지들. -> 온라인 쇼핑몰 웹사이트나 티스토리를 활용한 개인 블로그, 구글 등)

이처럼 홈페이지 자신이나 자신의 제품을 홍보하거나

어떠한 정보를 전 세계에 공유하거나

기업에 자신을 홍보(ex) 포트폴리오)하는 등 다양하게 활용할 수 있습니다.

 

홈페이지를 제작하는 방법은 크게 두 가지로 나눌 수 있습니다.

1. 마크업 언어 사용하기 (ex) HTML 등) -> 난이도 上 / 자유도 上
2. 홈페이지 제작 서비스를 제공하는 프로그램 사용하기 -> 난이도 下 / 자유도 下

 

그래서, 오늘은 비개발자를 위한 홈페이지 제작 사이트 3가지를 소개해보고자 합니다.

 

 

 

 


 

 

 

 

  •  아임웹 I'mweb

아임웹 로고 출처 : https://imweb.me/

 

아임웹은 2010년에 설립된 한국 기업으로, 스스로 만드는 반응형 웹사이트로 웹사이트를 제작하는 사이트입니다.

(반응형 솔루션이기 때문에 어떤 기기에서든 활용할 수 있으나 크롬에서만 디자인 관리가 가능합니다.)

아임웹 계정 생성

아임웹에서 홈페이지를 만들기 위해서는 우선 계정을 생성해야 합니다. 회원가입을 완료하면 화살표가 가리키는 오른쪽 창이 뜨게 됩니다.

 

아임웹 탭

아임웹 상단의 탭에 대한 설명입니다. 우선 웹사이트를 만들기 위해 주요 기능을 클릭해보려고 합니다.

 

아임웹 주요 기능

주요 기능에서는 '무료로 시작' 버튼 외에 기능쇼핑, 디자인 모드 등 아임웹에서 제공하는 서비스에 대한 설명이 나와 있습니다.

 

그럼 본격적으로 시작해볼까요?

아임웹 사이트 개설 시작

'무료로 시작' 버튼을 클릭하면 사이트 개설을 위한 템플릿을 볼 수 있습니다.

템플릿 아래 붉은 원은 해당 템플릿이 추천하는 홈페이지 주제를 나타내는 태그이며

태그를 통해 자신의 원하는 템플릿을 선택했다면 '개설하기'를 클릭하여 꾸미기를 시작할 수 있습니다.

 

아임웹 사이트 개설

개설하기를 클릭하면 우선 새로운 사이트의 이름과 주소, 문의를 위한 전화번호를 입력하고 개설을 할 수 있습니다.

위와 같은 창에서 개설한 사이트의 이름과 주소 등을 확인할 수 있습니다.

 

아임웹 사이트 관리

위의 창에서 관리 클릭 시 사이트 관리 페이지에 접근하기 위한 비밀번호를 설정한 후 아이디와 방금 설정한 비밀번호 (이후 사이트를 개설할 때마다 동일한 비밀번호를 입력하면 된다.)으로 로그인하면 길고 길었던 본격적인 사이트 만들기를 시작할 수 있습니다.

 

아임웹 사이트 만들기

아임웹에서 제공하는 사이트 제작 서비스입니다.

사이트 제작을 위한 단계와 스크롤을 아래로 내리면 아임웹을 사용하는 방법을 알려주는 가이드가 존재합니다.

 

아임웹 기본 설정

간단히 기본 설정 하나만 수정해볼까요? 메인 화면에서 기본 설정을 클릭하면 위와 같은 화면이 나옵니다.

위 화면은 사이트의 이름과 아이콘, 대표 이미지를 수정할 수 있는 설정란으로,

? 클릭 시 해당 칸에 어떤 내용을 입력해야 하는 지에 대해 설명해줍니다.

이렇게 수정을 하고 나면

 

아임웹 설정 시 변경하는 바

위의 화면처럼 푸른색 게이지가 차면서 아래 V 표시로 어떤 것의 설정을 완료했는지 표시해줍니다.

 

다음은 디자인 모드에서 이미지와 텍스트, 메뉴 등을 변경하는 방법에 대해 간략히 이야기하겠습니다.

 

아임웹 디자인 모드에서 이미지 설정

디자인 모드에 들어가면 사이트를 개설할 때 선택한 템플릿을 수정할 수 있는 창이 뜨게 됩니다.

이미지를 설정하고 싶으면 이미지가 들어가 있는 부분을 더블 클릭하면 됩니다.

위의 사진처럼 원하는 이미지를 넣고 효과나 링크 등을 설정할 수 있습니다.

(마찬가지로 ? 클릭 시 해당 칸에 어떤 것을 해야 하는 지에 대해 설명을 볼 수 있습니다.)

 

아임웹 텍스트 편집

다음은 텍스트 편집입니다.

텍스트 편집 또한 디자인 모드 -> 템플릿 내용 중 텍스트 부분에서 설정이 가능합니다.

위처럼 수정하고 싶은 텍스트 칸을 더블클릭 하면 수정이 가능하도록 바뀌며 글자 굵기, 기울기, 밑줄, 인용, 링크, 아이콘 등을 설정할 수 있으며 해당 텍스트를 코드화 하여 수정할 수 있습니다.

 

아임웹 메뉴 설정

이 화면 또한 디자인 모드 -> 템플릿에서 확인할 수 있습니다.

메뉴 설정에서는 템플릿 상단에 위치한 메뉴 내용을 원하는 대로 바꿀 수 있습니다.

 

 

아임웹 사이트 관리

만약 만든 사이트가 마음에 들지 않는다면 사용자 화면의 관리에서 사이트를 삭제할 수 있습니다.

외에도, 사이트를 만들다 말았다면 사이트 관리를 클릭해 수정을 이어서 할 수 있으며 바로 디자인 모드로 들어갈 수도,

템플릿을 변경하거나 해당 사이트의 소유권을 다른 사람에게 넘길 수 있습니다.

 

 


 

 

  • WIX

wix 로고 출처 : http://www.wix.com

Wix는 2006년에 설립된 회사로, 클라우드 기반의 무료 홈페이지 제작 사이트로 홈페이지 제작은 무료이나

광고 제거, 온라인 쇼핑몰 등의 일부 기능을 이용하기 위해서는 유료로 전환해야 합니다.

2016년에는 인공지능 방식의 자동 홈페이지 제작 솔루션 기능을 선보였습니다.

(아임웹에 비해서 제작이 간단하며 웹 표준을 따르기 때문에 호환성 문제를 일으킬 염려가 없습니다. 하지만 복잡한 기능을 구현하기 어려우며 로딩 등에서 속도가 매우 느리고 검색이 잘 되지 않습니다.)

 

 

wix 홈페이지 화면

Wix를 시작하기 위해 시작하기 버튼을 클릭하면 로그인 화면으로 넘어가게 됩니다.

 

WIX 제작

로그인을 완료하면 아래처럼 템플릿의 카테고리를 선택하고 나면

인공지능을 통한 자동 제작 및 직접 처음부터 만드는 에디터 중 하나를 선택할 수 있습니다.

먼저, 자동 제작의 경우를 살펴본다면 아래와 같습니다.

 

wix 자동 제작 시 설문

자동 제작을 선택한다면 위처럼 설문조사를 진행합니다. 어떠한 서비스를 제공할 것인지 등을 선택한 후 사이트의 이름 등을 설정한 후 아래처럼 테마를 고를 수 있는 창으로 넘어가게 됩니다.

 

wix 테마 선택

앞에서 입력한 여러 정보를 바탕으로 구성된 내역을 검토 및 편집하고 테마를 선택하면

해당 테마에 맞는 디자인을 보여줍니다.

이후, 원하는 디자인을 선택하면 해당 디자인에 맞는 페이지를 추가할 수 있게 됩니다.

wix 자동 제작 결과물

페이지 추가까지 완료하게 되면 위와 같은 화면이 나오게 되며, 여기서 이미지나 텍스트를 수정할 수 있습니다.

 

다음으로 에디터로 시작 부분을 보여드리겠습니다.

wix 에디터로 시작
wix 직접 제작

에디터로 시작을 클릭한 후 원하는 템플릿을 선택하면 두번째 이미지와 같은 화면이 뜨게 됩니다.

이 화면에서 주어진 템플릿을 좌측 탭을 이용해 자유롭게 꾸밀 수 있습니다.

 

wix 이미지 설정

Wix에서 이미지를 설정하는 방법은 위와 같습니다.

변경하고 싶은 이미지 칸을 클릭한 후 추가 버튼을 클릭하면 이미지를 추가할 수 있습니다.

Wix에서는 자체적으로 제공하는 이미지가 있어 만약 마땅한 이미지를 가지고 있지 않다면 유용하게 사용할 수 있습니다.

 

Wix 텍스트 설정

텍스트 설정 또한 변경하고 싶은 칸을 선택한 후 좌측 설명 부분에서 텍스트를 변경하면 됩니다.

사이트 설정이 완료되었다면 상단 우측에 위치한 게시하기를 선택하여 도메인을 선택할 수 있는 창이 뜨게 됩니다.

(맞춤형 도메인유료 서비스이기 때문에 무료 이용자는 무료 도메인을 사용해야 합니다.)

 

wix 제작한 사이트 확인

게시하기까지 완료했다면 내 사이트에서 만든 사이트의 목록을 확인할 수 있습니다.

 

 

 


 

  • 모두! modoo!

네이버 modoo! 로고 출처 : https://www.modoo.at/home

모두!는 네이버에서 제공하는 모바일 홈페이지 제작 사이트입니다.

(아임웹이나 Wix와는 다르게 무료이며 네이버 기능과 연계성이 좋습니다. 하지만 설정의 다양하지 않습니다.)

 

모두! 홈페이지

모두!에 접속해 홈페이지를 개설하려면 네이버 아이디가 필요합니다.

사용하는 네이버 아이디로 로그인한 후 나도 시작하기 -> modoo! 시작하기를 클릭하면

본격적으로 홈페이지 제작을 시작할 수 있습니다.

 

모두! 톡톡

네이버 모두!에서는 톡톡이라는 실시간 상담 창구를 제공하고 있습니다.

톡톡을 이용한다면 별도의 전화번호나 메일을 사용하지 않아도 이용자의 문의나 상담 등을 진행할 수 있습니다.

이 창에서는 홈페이지 활용 안내를 톡톡으로 받을 지, 메일로 받을 지를 선택합니다.

 

모두! 템플릿 선택 후 개설

좌측 상단의 템플릿 설정 창에서 원하는 카테고리를 선택하면 우측 아래와 같은 화면으로 변경됩니다.

이 화면에서 사이트를 제작할 수 있습니다.

 

모두! 홈페이지 정보 수정
모두! 홈페이지 정보 수정

우선 홈페이지의 이름과 도메인, 대표 이미지 등을 설정해볼까요?

정보 수정을 클릭하면 위처럼 홈페이지 이름과 도메인, 대표 이미지, 검색 노출 등을 설정할 수 있으며

전화/톡톡을 통해 등록할 전화번호를 입력하거나 톡톡 사용을 설정할 수 있습니다.

 

모두! 홈페이지 설정

홈페이지 설정에 대한 간략한 설명을 하나로 편집한 화면입니다.

순서대로, 상단 막대페이지이며 편집할 페이지를 선택하면 하단 좌측의 화면이 뜨게 됩니다.

스케쥴 옆 붉은색 원 속 톱니바퀴를 선택하면 페이지의 복사, 삭제 등을 선택할 수 있으며

녹색 칸처럼 한 페이지에 두 개의 내용을 넣을 수 있습니다.

만약 페이지 순서를 바꾸고 싶다면 해당 페이지를 클릭한 채로 이동하면 됩니다.

 

모두! 페이지 추가

페이지 추가를 선택하면 원하는 페이지를 추가할 수 있습니다.

각 페이지의 설명이 요소의 아래에 간략하게 나와있으니 해당 내용을 보고 선택하면 됩니다.

 

모두! 이미지 올리기

다음은 이미지를 올리는 방법입니다.

각 페이지마다 이미지를 올릴 수 있는 이미지 올리기 버튼이 존재합니다.

버튼을 클릭하면 우측과 같은 창이 뜨는데, 이 우측 창에서 사진을 추가할 수 있습니다.

모두! 텍스트 설정

텍스트를 설정하는 방법 또한 간단합니다.

폰 화면에서 수정하고 싶은 칸을 클릭한 후 우측에서 내용을 수정하면 됩니다.

모두! 구성요소 추가

구성 요소를 추가하는 방법은 좌측 구성요소 추가 부분에서 원하는 요소의 V 버튼을 클릭한 후

원하는 것의 + 버튼을 누르면 됩니다.

모두! 저장 및 반영

모든 페이지의 수정을 완료했다면 홈페이지 반영을 클릭하면 됩니다.

공개 여부를 결정하면 홈페이지 반영이 완료됩니다.

만약 페이지를 수정하다 다른 할 일이 생겨 종료해야 한다면, 임시 저장을 통해 편집 내용을 저장할 수 있습니다.

 

모두! 홈페이지 관리

마지막으로, 모두!에서 홈페이지를 관리하는 창은 위와 같습니다.

위의 설명 외에도 방문자 통계에서 홈페이지의 일별 방문 분포와 검색 유입, 검색어 등을 확인할 수 있고

월간 리포트에서 간략한 일별 방문자수, 접속 환경 등을 확인할 수 있습니다.

(홈페이지를 공개하면 회색으로 연한 상태의 버튼들을 활성화할 수 있습니다.)

모두! 홈페이지 공개/비공개 차이

 


 

이렇게 아임웹, Wix, 모두!까지

총 3가지 무료 홈페이지 제작 사이트를 소개해보았습니다.

 

만약 개인적으로 간단하게 홈페이지를 개설하고 싶다면 Wix를,

이미지와 텍스트가 어우러진 레이아웃을 사용하고 싶다면 아임웹을,

디자인보다 모바일 중심의 관리가 쉬운 홈페이지를 제작하고 싶다면 모두!를 추천드립니다.

 

감사합니다!

 

 

추가 정보

도메인 (도메인 네임) : 네트워크 상에서 컴퓨터를 식별하는 호스트명. 간단히 웹 주소라고 생각하면 된다.
HTML : 하이퍼텍스트 마크업 언어로 웹페이지가 어떤 식으로 구조화되어 있는지 브라우저(크롬 등)이 알 수 있도록 하는 언어다.
마크업 언어 : 태그 등을 이용해 문서나 텍스트의 구조를 나타내거나 데이터의 논리적 구조를 명시하기 위한 규칙들을 정의한 언어의 일종. 즉, 웹사이트의 서식이나 구조 등을 잡아주는 언어이다.

마크업 언어 예시

출근
네 생각에
잠 못이뤄
하상욱

V

<제목>출근</제목>
<행>네 생각에</행>
<행>잠 못이뤄</행>
<저자>하상욱</저자>

<제목>, <행> 등을 태그 tag라고 하며 <제목>을 여는 태그, </제목>을 닫는 태그라고 부르고, 열고 닫는 하나의 태그 쌍을 요소 element라고 한다. (ex) <제목>출근</제목> -> 제목 태그)
마크업 언어 VS 프로그래밍 언어

프로그래밍 언어는 어떤 프로그램을 움직여야 한다 (동적). 하지만 마크업 언어는 단순히 페이지의 틀을 정의해주는 것이기 때문에 프로그램을 움직이게 만들 수 없다 (정적).

즉, 마크업 언어는 사용자가 보기 좋게 폰트의 굵기나 이미지 위치 등을 설정하는 역할을 하고, 프로그래밍 언어는 마크업 언어로 표현한 내용을 구동시키는 역할을 한다.