웹사이트를 제작하는 5단계 과정! 기초편

웹사이트 제작 과정의 대략적인 흐름에 대해 알아봅니다. 웹사이트를 제대로 제작하려면 기획부터 출시까지, 많은 계획과 작업이 필요합니다. 하지만 전문가가 아닌데, 구체적인 사항과 기법까지 알려고 하면 지쳐버립니다. 따라서 이 글에서는 웹사이트를 제작하는 흐름에 대해 꼭 알아야 할 것만 꼽아 파악해보는 것이 목표입니다.

 

 

이런 고민이 있는 분에게 추천합니다.

 

• 웹사이트를 어떻게 만드는지 궁금하다.
• 웹사이트를 제작하는 전체적인 흐름을 알고 싶다.
• 웹사이트 만드는 곳에 맡기더라도 기본은 알고 싶다.

웹사이트를 구축하려면 올바른 흐름을 따르는 것이 중요합니다. 직접 웹사이트를 제작하지 않더라도, 웹 제작사에 의뢰를 할 때도 공정과 내용을 이해한다면 효율적으로 프로젝트를 진행할 수 있을 것입니다.

웹사이트는 만드는 순서는 아래와 같습니다.

 

1. 프로젝트 기획

2. 웹사이트 설계

3. 디자인 제작

4. 웹사이트 개발

5. 출시

 

이후에 업데이트와 유지보수를 실시합니다.

그럼 한 단계씩 알아보겠습니다.

1. 프로젝트 기획

 

웹사이트를 제작할 때는 목적이 있어야 합니다. 처음 목적을 세울 때는 목적이 너무 많거나, 추상적일 수 있습니다. 따라서 목적부터 명확하게 하도록 합니다.

 

누군가는 기획을 이상과 현실을 이어주는 다리라고 말하더군요. 아래 항목들을 작성하다 보면, 명확하고 구체적인 목표를 얻을 수 있을 것입니다.

1) 사이트를 제작하는 목적이 무엇인가?

 

무엇을 위해서 웹 사이트를 제작할 것인지 목적을 명확하게 합니다.

 

예를 들면, 서비스나 상품의 매상을 늘리거나, 방문자를 높여 광고수익을 늘리는 것 등을 목적으로 할 수 있습니다.

2) 측정 가능한 달성 목표가 있는가?

 

당연한 말이지만, 웹사이트는 만들어서 출시한다고 해서 웹사이트가 스스로 성장하지는 않습니다. 

 

웹사이트를 제작한 뒤에 어떠한 목표를 달성할 것인지, 달성 정도를 평가하고 개선할 수 있는 지표를 정합니다.

3) 주요 고객층은 누구인가?

 

웹사이트 제작 과정이 완료된다면 이용할 것으로 예상되는 주요 사용자를 정합니다.

타깃 유저는 상세한 인물상(페르소나)을 정하는 것이 중요합니다.

 

어떤 사용자를 타깃으로 하느냐에 따라, 어떤 사이트를 구축할지가 달라지게 됩니다.

4) 커뮤니케이션 방식은 어떤 것들이 있는가?

 

목적을 달성하려면, 타깃 유저와 어떠한 커뮤니케이션을 해야 하는지 조사하고 분석하는 과정이 필요합니다.

 

업계 동향이나 트렌드, 벤치마킹할 것들 등 여러 가지로 수집한 정보를 분석하여 최적의 커뮤니케이션 방법을 결정해야 합니다.

5. 웹사이트의 콘셉트가 무엇인가?

 

목적·목표, 타깃 유저, 커뮤니케이션 정보를 바탕으로 웹사이트의 콘셉트를 결정합니다.

 

이 콘셉트는 프로젝트의 기본방침이 되어, 이후의 설계나 콘텐츠의 개발, 디자인의 모든 것에 대한 지침이 됩니다.

 

후속 스텝으로 진행하고 나서 콘셉트가 바뀌면, 되돌릴 수 없게 되어, 제작의 재시도가 될 수도 있습니다.

2. 웹사이트 설계

 

기획 내용이 정해지면 웹사이트를 설계를 시작합니다.

 

1) UX 디자인

 

UX란 User Experience의 약자로, 상품이나 서비스를 접하게 하는 가운데 타깃에 대해서 어떠한 체험을 받게 하는지 설계하는 공정입니다.

 

어떠한 타이밍에서, 어떠한 콘텐츠를, 어떻게 매혹시킬 것인가. 어떠한 느낌을 받을 것인가? 와 같은 체험을 디자인하는 것입니다.

 

'사용자 여정'이나 '사용자 시나리오'를 이용하여 판단하는 근거를 만들고 진행해 나갑니다.

2) 콘텐츠 기획

 

UX 디자인 설계에 근거하여 어떠한 콘텐츠를 제공해야 하는지를 생각합니다. 사이트 운영자의 의도와 사용자의 요구가 일치하도록 콘텐츠를 기획합니다.

 

다른 웹사이트를 참고하거나, 사용자 군에게 보고 싶은 콘텐츠에 대한 의견을 묻고 참고해서 결정합니다.

SEO에 대한 배려

 

콘텐츠 기획은 SEO(검색 엔진 최적화)에 대한 배려도 중요합니다. 

 

어떠한 키워드를 검색하고 있는 유저가 존재하며, 그 검색 의도에 어떠한 콘텐츠가 중요한가 하는 시점에서 콘텐츠를 생각하는 것도 중요합니다.

프로젝트 기획이 어떤 개념을 가지는 것이라면, 웹사이트 설계는 웹사이트 제작 과정을 실행하기 위한 실제적인 계획이라고 할 수 있습니다.

3) 사이트 구조 설계

 

사이트 구조 설계란 콘텐츠를 사용자의 열람에 맞춰 어떤 우선순위로 게재할 것인지를 결정하는 것을 말합니다.

 

사이트 구조 설계는 아래의 목적을 가지고 진행합니다.

 

• 콘텐츠의 구조를 체계화
• 콘텐츠별 관련성을 명확화
• 사용자가 편하게 이동할 수 있는 내비게이션 설계
• 콘텐츠를 올바르게 정리하는 레벨링

 

같은 카테고리의 콘텐츠가 흩어져 배치되어 있으면 사용자에게 불편함을 줍니다. 따라서 사용하기 쉬운 웹 사이트로 설계해서, 사용자가 체류하고 재방문할 수 있도록 합니다.

 

사이트 구조를 설계하는 대표적인 문서(양식)는 정보구조도, 사이트 맵 등이 있습니다.

4. 페이지 구조 설계 - 와이어 프레임 제작

 

사이트 맵을 바탕으로 와이어 프레임이라고 불리는 화면 설계도를 만드는 것입니다.

 

페이지별로 '어떤 정보'를 게재할 것인지 구성 요소를 정의하는 공정입니다. 정보의 중요도에 따라, 정보의 흐름이나 레이아웃 등을 정의하는 경우도 있습니다.

 

와이어프레임은 관련된 멤버들이 어떤 페이지를 제작하는지 공유하고 이해하기 위한 중요한 문서이므로, 주의사항이나 기획 의도를 첨부해서 팀원이 이해할 수 있도록 합니다.

5. 시스템 설계

 

사업 여건이나 사이트 구조를 바탕으로, 어떤 시스템을 도입할지에 대한 설계를 실시합니다.

 

먼저 처음부터 맞춤으로 개발할 것인지, 이미 개발되어 있는 CMS를 도입할 것인지 등을 결정합니다.

시스템 설계할 때 다음과 같은 조건을 고려할 수 있습니다.

 

• 필요 요건을 충분히 충족할 수 있는가?
• 구축 예산 내에서 실장 가능한가?
• 필요한 보안을 담보하고 있는가?
• 유지관리성을 고려할 수 있는가?
• 확장성을 고려할 수 있는가?

직접 개발하는 것은 확장성이 좋지만 시간이 걸려 예산이 더 들 수 있고, CMS를 사용하는 것은 시간이 단축되지만 제한이 있어 필요 요건을 만족시킬 수 없을 수도 있습니다.

3. 디자인 제작

 

웹 사이트 설계가 완료되면 디자인 제작에 들어갑니다. 

 

웹 사이트의 목적에 맞게 디자인 콘셉트를 정하고, 정보 설계를 시각적으로 더 잘 나타내는 방안을 찾습니다.

 

실제로 웹사이트 제작 과정을 진행하는 기분을 느낄 수 있어 개인적으로 가장 설레는 단계입니다.

1) 디자인 콘셉트 설계

 

사이트 안에서 공통되고 일관된 비주얼 디자인을 제작할 수 있도록, 디자인 콘셉트를 설정합니다.

 

상품·서비스의 콘셉트이나 사용자와의 커뮤니케이션 설계를 바탕으로, 사용자에게 적절한 디자인은 어떠한 것인지를 언어화합니다.

 

또한 이미지 보드나 무드 보드 같은 시각자료를 통해, 팀원들이 공통된 이미지를 인식함으로써 서로 '좋은 디자인'을 공유하고 의견을 나누며 디자인 작업을 원활하게 진행할 수 있습니다.

디자인 콘셉트 설계 단계에서 결정해야 하는 항목들입니다.

 

• 디자인의 방향성을 정리한 텍스트
• 메인이 되는 색상의 규칙
• 글꼴의 규칙
• 이미지 소재 등의 방향성에 대한 규칙
• 레이아웃의 대략적인 규칙
• 공통 부품 규칙

 

 

2) 리소스 준비

 

디자인 콘셉트에 따라, 사이트에서 사용하는 이미지나 텍스트, 일러스트 등을 준비합니다.

 

기존에 만들어둔 리소스 또는 이미지 사이트에서 얻거나 구매한 것들을 분류해서 저장해둡니다.

 

※ 리소스의 저작권을 확인하는 것을 잊지 않도록 주의해야 합니다.

3) 디자인 시안 제작

 

소재가 준비되면 각 페이지에 대한 디자인을 진행합니다.

 

디자인 콘셉트에 따라 제작되지만, 비주얼화 했을 때 인상의 차이, 위화감이 없는지 체크하면서 진행하세요. 이로써 퀄리티 높은 디자인을 실현할 수 있습니다.

디자인 제작 시 유의사항

 

흔히 발생할 수 있는 트러블로, 실현 불가능한 기능이 디자인으로 표현되어 있을 수 있습니다.

외형뿐만 아니라 시스템 동작 시 디자인 문제가 없는지도 함께 확인하도록 합니다.

4. 웹사이트 개발

 

디자인이 완료되면 웹 사이트로 기능할 수 있도록 시스템을 구현하고 웹 브라우저에서 볼 수 있도록 합니다.

 

이 작업을 시스템 개발, 코딩 마크업 등으로 부르고 있습니다. 시스템 개발에는, HTML 나 JavaScript 를 사용하는 프런트엔드와 PHP 등 서버 언어를 사용하는 백엔드로 나누어져 있습니다.

 

각각 할 수 있는 것이 다르기 때문에, 구현 전에 필요한 구현 영역과 역할 분담을 명확하게 해 두는 것이 좋습니다.

 

웹사이트 제작 과정이 실제로 시작되는 단계이므로, 그동안의 기획과 디자인을 기술과 융합해서 제대로 적용하는 것이 중요합니다.

 

1) 프런트엔드 구현

 

디자인을 인터넷 화면에서 비주얼 적으로 볼 수 있도록 구현하는 작업입니다.

 

주로 HTML, CSS, 자바스크립트와 같은 언어로 웹페이지에 표시되는 텍스트 및 장식까지 디자인된 모든 요소를 구현합니다.

2) 백엔드 구현

 

서버에서 작동하는 프로그램을 개발하는 과정입니다. 눈에 잘 보이지 않는 부분의 작업이기 때문에 감이 오지 않을지도 모르지만, 실제로 웹사이트를 동작하게 하는 중요한 과정입니다.

 

자체 시스템 개발이나, 흔히 사용하는 워드프레스 시스템의 설치나 커스터마이징 설정 등을 합니다.

 

프로그래밍 외에도 웹사이트 공개를 위해서 서버 설계나 도메인 설정 등 인프라를 준비합니다.

3) 테스트

 

프런트엔드나 백엔드 엔지니어 작업이 완료되면 테스트를 진행합니다.

 

사용자가 웹 사이트를 보는 환경은 다양합니다. 어떤 사용자가 보아도 동일한 디자인으로 보이는지, 사양대로 시스템이 작동하고 있는지 확인하고 문제가 있으면 수정합니다.

 

수정할 점이 하나도 없이 출시할 수 있는 경우는 매우 드물기 때문에, 테스트와 수정 기간의 스케줄을 확보해 둡시다.

 

테스트의 명확성을 위해, 구현 전에 어떤 환경에서 어떻게 동작할지 디테일하게 정하는 것이 중요합니다.

 

그리고, 어떠한 기능을 어떠한 환경에서 동작의 체크를 실시하는가 하는 ‘테스트 목록’을 작성하면 체계적으로 테스트할 수 있습니다.

5. 출시

 

이제 마지막 단계입니다. 테스트에서 동작에 문제점이 없으면 출시 작업을 수행합니다. 

 

출시 당일은 디자이너와 엔지니어 모두 가동할 수 있도록 준비를 해두면 좋습니다. 만전을 기하고 나서 릴리즈 작업을 할 것이지만, 예상 밖의 요인으로 오류가 발생할 수도 있습니다. 

 

반드시 출시 직후 공개된 사이트에서 테스트를 수행하고 문제가 있으면 즉시 조정할 수 있는 체제를 갖추도록 합시다.

요약

 

1. 프로젝트 기획 : 목적과 목표, 타깃을 명확히 하고 시장 조사나 분석을 통해 프로젝트를 기획합니다.

 

2. 웹사이트 설계 : 사용자 체험을 설계하고 어떤 커뮤니케이션을 실시할 것인지 등을 검토합니다.

 

3. 디자인 제작 : 콘셉트와 규칙을 정하여 보다 최적의 디자인을 만들어보세요.

 

4. 구현 : 설계와 디자인을 웹사이트에 반영하고 테스트합니다.

 

5. 출시 : 끝까지 마무리해서 출시합니다.

웹사이트 제작 과정의 흐름에 대해 소개해보았습니다. 어떠신가요? 이와 같은 흐름을 건너뛰고 만든 웹 사이트와, 처음부터 제대로 만든 웹 사이트는 퀄리티가 전혀 다릅니다. 꼭 실천해보시길 바랍니다.

읽어주셔서 감사합니다.