튜토리얼 문서

초보자

5분

웹 디자인 단계

콘텐츠 계획, 디자인 와이어프레임 제작, 웹 페이지 만들기, 사이트 게시 등 웹 프로젝트의 주요 단계를 살펴보세요.

1

콘텐츠 계획

좋은 콘텐츠의 계획은 단연코 웹 디자인에 있어 가장 중요한 단계입니다. 이는 가장 긴 시간이 소요되는 단계이지만 세심한 준비가 필요한 단계이기도 합니다. 훌륭한 콘텐츠 기획은 사이트의 가치와 사용성을 높여줄 뿐만 아니라 웹 개발 시간을 단축시켜줍니다.

이 단계에서 명심해야 하는 주요 포인트는 주요 고객을 파악하고 간결하고 명료한 콘텐츠가 훨씬 더 효과적이라는 점을 이해하고 사이트에서 사용자의 행동 패턴을 예측하고 콘텐츠를 논리적으로 구성해야 합니다.

2

디자인 와이어프레임 제작

와이어프레임은 웹 사이트에 대한 청사진 또는 추상적인 시각적 표현으로, 이를 통해 팀은 디자인 및 계획 단계 동안 매끄러운 공동 작업을 진행할 수 있습니다. 와이어프레임은 아이디어가 떠오를 때마다 신속하게 손으로 그린 간단한 다이어그램이 될 수 있으며 웹 사이트의 내비게이션 및 기능에 대한 보다 복합적인 정의가 될 수 있습니다.

펜과 종이, 무료 또는 상용 와이어프레임 소프트웨어 앱, Photoshop과 같은 Creative Cloud 앱을 비롯해 다양한 와이어프레임 툴이 있습니다. 팀에 적합한 방법과 세부적인 레벨을 선택하여 이용합니다.

3

웹 페이지 제작

이제 디자인과 계획을 구현해야 합니다. 구체적인 계획에 생기를 불어넣기 위해서는 웹 디자인의 언어를 이해하는 것이 중요합니다. 이 시리즈에서는 HTML과 CSS를 집중적으로 살펴보면서 JavaScript도 간략하게 살펴봅니다.

HTML(Hypertext Markup Language)은 웹 사이트의 전체 구조와 페이지의 콘텐츠를 제작하는 데 사용되는 언어입니다. CSS(Cascading Style Sheets)는 웹 사이트 콘텐츠의 시각적 속성 스타일을 지정하고 레이아웃을 사용자 정의하는 데 사용됩니다. JavaScript는 웹 페이지에 기능 및 인터랙션 요소를 추가하는 데 널리 사용되고 있는 언어입니다.

4

웹 사이트 게시

누구나 볼 수 있도록 웹 사이트를 게시하기 전에 몇 가지 작업이 더 남아 있습니다. 먼저 도메인 이름 또는 웹 주소를 확보해야 합니다. 뿐만 아니라 웹 서버에 전용 공간과 연결 세부 정보도 필요합니다. FTP는 웹 서버에 연결할 수 있는 일반적인 방식입니다. 회사용으로 웹 사이트를 제작하는 경우라면 이 정보는 IT 웹 관리자로부터 얻을 수 있습니다. 개인 사이트를 게시하는 경우라면 이 정보는 웹 호스트 제공업체로부터 얻을 수 있습니다.

그런 다음 Dreamweaver에서 사이트 기능을 사용하여 웹 서버에 연결하면 사이트를 바로 게시할 수 있습니다.


컨트리뷰터

Tom Buch

2022년 8월 25일

Dreamweaver에서 이들 튜토리얼 사용해 보기

모던한 반응형 웹 페이지를 디자인하세요.