사이트 만드는 방법은? 단계별 제작 가이드 | 초보탈출 웹사이트 용어 공부 블로그

블로그 전체목록

사이트 만드는 방법은? 단계별 제작 가이드

초보탈출 웹사이트 용어 공부 25.07.22

사이트 만드는 방법은 기획, 디자인, 퍼블리싱, 개발, 테스트, 오픈의 6단계 과정을 거치는 것입니다.

사이트 만드는 방법 대표이미지

· 목차

- 사이트 만드는 과정이란?

- 기획 단계에서는 무엇을 하나요?

- 디자인은 어떻게 진행되나요?

- 퍼블리싱 단계에서는 무엇을 하나요?

- 개발 단계는 어떻게 이루어지나요?

- 검수 및 오픈 과정은?

- 사이트 만들기 전 알아야 할 필수 구성 요소는?

- FAQ

- 관련 링크

1. 사이트 만드는 과정이란?

일반적으로 웹에이전시에서 사이트를 제작할 때는 아래와 같은 표준 프로세스를 따릅니다.

기획, 디자인, 퍼블리싱, 개발, 검수 및 테스트, 오픈 단게를 통해 목적에 맞는 사이트를 효율적이고 안정적으로 구축할 수 있습니다.

사이트를 만드는 과정

2. 기획 단계에서는 무엇을 하나요?

먼저 요구사항 분석 단계에서는 클라이언트의 목적과 타겟, 그리고 경쟁사를 면밀히 분석합니다. 그다음 정보구조 설계 단계에서는 메뉴 구성과 페이지 흐름을 체계적으로 설계합니다. 그리고 와이어프레임 작성 단계에서는 레이아웃과 콘텐츠 배치를 초안 형태로 구체화합니다. 기획 단계에서 산출되는 주요 결과물로는 사이트맵, 와이어프레임, 그리고 기능 정의서가 있습니다.

※ 기획 단계 주요 업무

- 요구사항 분석 : 클라이언트 목적, 타겟, 경쟁사 분석

- 정보구조 설계 : 메뉴 구조, 페이지 흐름 구성

- 와이어프레임 작성 : 레이아웃, 콘텐츠 배치 초안

※ 기획 단계의 산출물

- 사이트맵

- 와이어프레임

- 기능 정의서

Key Message : “기획 단계의 완성도가 전체 사이트 품질을 결정합니다.”

3. 디자인은 어떻게 진행되나요?

디자인 단계의 주요 업무는 먼저 브랜드 컬러와 톤앤매너를 정의하여 컨셉을 도출하는 것입니다. 그 후 메인 페이지 디자인을 위한 메인 시안을 제작하며, 이어서 서브 페이지 디자인을 위한 서브 시안도 제작합니다. 이 과정에서 주로 사용하는 툴로는 Adobe Photoshop, Adobe XD, 그리고 Figma가 있습니다.

※ 디자인 단계 주요 업무

- 컨셉 도출 : 브랜드 컬러, 톤앤매너 정의

- 메인 시안 제작 : 메인 페이지 디자인

- 서브 시안 제작 : 서브 페이지 디자인

※ 사용 툴

- Adobe Photoshop

- Adobe XD

- Figma

※ 산출물

- 메인/서브 디자인 시안 파일

- 스타일가이드

퍼블리싱 주요업무

4. 퍼블리싱 단계에서는 무엇을 하나요?

퍼블리싱이란 디자인 시안을 웹 표준 코드인 HTML, CSS, 그리고 JavaScript로 변환하는 작업을 의미합니다. 주요 업무로는 HTML5 마크업 작성, CSS3 스타일 적용, JavaScript(jQuery)를 이용한 인터랙션 구현, 그리고 반응형 웹 작업이 포함됩니다. 이 작업을 수행할 때 주로 사용하는 툴로는 VS Code, Sublime Text, 그리고 GitHub 또는 GitLab이 있습니다.

※ 퍼블리싱이란?

- 디자인 시안을 웹 표준 코드(HTML, CSS, JS) 로 변환하는 작업입니다.

※ 주요 업무

- HTML5 마크업, CSS3 스타일 적용, JavaScript(jQuery) 인터랙션 구현, 반응형 웹 작업

※ 사용 툴

- VS Code, Sublime Text, GitHub / GitLab

5. 개발 단계는 어떻게 이루어지나요?

개발 단계의 주요 업무는 프론트엔드 개발, 백엔드 개발, 그리고 서버 구축으로 나뉩니다. 프론트엔드 개발에서는 퍼블리싱된 화면과 API를 연동하는 작업을 진행합니다. 백엔드 개발은 데이터베이스 설계와 관리자 페이지 구축을 담당하며, 서버 구축 단계에서는 호스팅, 보안 설정, 그리고 배포 작업을 수행합니다. 사용하는 언어 및 프레임워크의 예로는 PHP의 Laravel과 CodeIgniter, Java의 Spring, Python의 Django, Node.js 등이 있으며, 데이터베이스로는 MySQL과 MariaDB를 주로 활용합니다.

※ 개발 단계 주요 업무

- 프론트엔드 개발 : 퍼블리싱 화면과 API 연동

- 백엔드 개발 : DB 설계, 관리자페이지 구축

- 서버 구축 : 호스팅, 보안 설정, 배포

※ 사용 언어 및 프레임워크 예시

- PHP (Laravel, CodeIgniter), Java (Spring), Python (Django), Node.js, MySQL, MariaDB

6. 검수 및 오픈 과정은?

※ 검수 단계

- 브라우저 크로스 테스트, 모바일·태블릿 최적화 확인, 기능 오류 및 오타 수정, 클라이언트 최종 확인

※ 오픈 단계

- 도메인 연결, 서버 배포, SSL 인증서 적용, 구글 서치콘솔, 애널리틱스 등록

TIP : 오픈 후 유지보수 계약으로 지속적 업데이트 관리가 필요합니다.

7. 사이트 제작 전 알아야 할 필수 구성 요소는?

아래 표는 웹사이트 제작에 반드시 포함되는 기본 요소를 정리한 것입니다.

도메인	사이트 주소(URL), 브랜드 인지도와 검색 최적화에 중요
호스팅	사이트 파일을 저장하고 서비스하는 공간
디자인	UI/UX 설계, 브랜드 이미지 표현
콘텐츠	텍스트, 이미지, 영상 등 사이트의 실제 정보
퍼블리싱	디자인 시안을 HTML/CSS/JS로 웹표준 코드화
개발	DB, 관리자 기능, 인터랙션 등 기능 구현
보안	SSL 인증서, 서버 보안 설정, 개인정보 보호
유지보수	업데이트, 백업, 오류 수정, 기능 추가 관리