홈페이지는 어떻게 만드나요? 구체적인 제작 과정은 무엇인가요?

웹사이트가 중요하다고 말하면서도, 실제로 웹사이트가 어떻게 만들어지는지 모르는 사람도 많지 않을까요? 아니면, 전문적으로 배우지 않으면 알 수 없는 것도 사실입니다.

인터넷상에도 HTML이나 CSS 등 기술적인 설명을 한 기사는 많지만, 전체적인 모습이나 흐름을 설명한 내용은 그렇게 많지 않습니다. '흐름만 알면 되는데'라고 생각하는 사람도 많을 테니까요. 무엇을 하든 기본을 아는 것은 중요합니다.

이번에는 웹사이트 제작 방법에 대해 전반적으로 설명해 드릴 테니, 앞으로 웹사이트 관련 업무를 하실 분, 자사에서 웹사이트를 만드실 분, 단순히 관심 있는 분들은 꼭 참고해 보세요.

참고로, 이번에 설명하는 방법은 어디까지나 이론적인 것이지만, 세부 사항은 저희의 방식입니다. 개인이나 회사에 따라 다소 차이가 있을 수 있다는 점을 인지해 주십시오.

먼저, 인터뷰를 한다. 그리고 계획을 세운다.

'클라이언트를 상대하는가' 아니면 '자사 서비스인가'에 따라서도 다소 방법이 다르지만, 기본적으로 처음에는 인터뷰와 계획 수립부터 시작합니다. 웹사이트가 아니더라도 무엇이든 마찬가지입니다. 처음에는 의견을 모으고 계획을 세웁니다.

목표는 무엇인지, 디자인은 어떻게 할지, 색상은 어떻게 할지, 어떤 콘텐츠를 만들지 등 결정할 것이 많지만, 가능한 한 처음부터 세부적으로 결정해 나갑니다. 다른 사이트를 보거나 제시하면서 점차 의견을 모읍시다.

그리고 이번 완성 이미지와 유사한 참고 사이트도 정합시다. 디자이너가 디자인할 때 방향성을 이해하기 쉬워집니다. 최종적으로 2~3개 정도 참고할 만한 사이트를 찾으면 논의가 빨라집니다. 애니메이션 등을 넣을 경우에는 애니메이션 참고 사이트도 찾아주세요.

기능적인 면에서도 업데이트 가능 여부, 메일 폼 처리 방식, 소셜 네트워크 연동 방식 등 가능한 한 의제로 제시합시다. 나중에 변경될 수도 있지만, 미리 논의해 둠으로써 나중에 놓치는 부분이 없어집니다.

도중에 약간의 변경이 있더라도, 나중에 '이런 기능을 추가하고 싶다'는 의견이 나오는 것이 개발상 더 큰 수고가 됩니다. 철저하게 필요하다고 생각되는 내용을 제시합시다.

기획서로 정리하고, 일정을 제시한다.

인터뷰 및 기획 브레인스토밍이 완료되면, 이제 논의한 내용을 자료로 만듭니다. 몇 페이지를 만들지 도식화한 '사이트맵'. 그리고 '일정'. 웹사이트 레이아웃만 작성한 '와이어프레임'도 메인 페이지만 대략적으로 만듭시다. 아래가 와이어프레임입니다.

물론, 색상, 방향성, 디자인, 참고 사이트 등 브레인스토밍에서 논의했던 내용도 기록해 둡니다. 클라이언트 작업이라면 '말했다', '말하지 않았다'는 분쟁을 없애기 위해서라도 자료로 정리하여 기록을 남기는 것이 중요합니다. 자사 기획이라도 정보를 정리하고 미리 충분히 생각함으로써 더 깊은 통찰력을 얻을 수 있습니다.

견적을 내는 것도 이 시점입니다. 논의하고 자료로 정리한 단계에서 비로소 어떤 사이트를 만들어야 할지에 대한 전체적인 그림이 보일 것입니다. 전체적인 그림이 보이고 어떤 사이트를 만들고 싶은지 명확하지 않으면 견적을 낼 수 없습니다.

공식적으로 사이트 요구사항이 결정되기 전에는 대략 상하 30% 정도의 오차가 있을 수 있다는 것을 전제로 하는 것이 좋습니다. 도중에 요구사항이나 추가 희망 사항 등이 나올 가능성도 있기 때문입니다. 경우에 따라서는 '추가 견적이 발생할 수 있다'고도 말합니다. 만약 처음부터 '이 정도 가격으로 가능합니다'라고 단정한다면, 추가될 내용까지 예상하여 상향된 가격으로 제시하는 것이 일반적입니다.

웹사이트 제작을 하는 쪽도, 요청하는 쪽도, 일찍 가격을 결정하는 것은 피하는 것이 좋습니다. 제작하는 동안 새로운 아이디어가 계속 나오기 때문에, 수시로 추가해 나가는 것이 좋은 결과물을 만들기 쉽습니다.

정리된 자료의 내용이 모두 OK라면, 제작을 시작합니다. 우선 와이어프레임을 모든 페이지에 만듭니다.

와이어프레임이란, 앞서 잠시 말씀드렸듯이, 웹사이트의 레이아웃과 콘텐츠만을 정리한 설계도와 같은 것입니다. 기본적으로는 회색 상자나 선, 그리고 글자 등으로 정리된 단순한 형태로, 디자인은 아직 포함되어 있지 않습니다.

기획을 정리하는 단계에서는, 대략적으로 첫 페이지만 와이어프레임을 제작하는 경우가 많습니다. 그리고 기획이 확실히 정해지면, 모든 페이지를 만듭니다.

이때, 와이어프레임을 PC에서 만들지, 아니면 스마트폰에서 만들지는 기획 내용에 따라 달라집니다. 개인적으로는 화면을 넓게 사용할 수 있는 상태에서 자유롭게 발상하는 것이 정보를 아낌없이 담아내기 쉽기 때문에 스마트폰 전성기인 지금도 PC 버전부터 만드는 것을 추천하고 싶습니다.

스마트폰의 좁은 화면을 전제로 만들면, 아무래도 가독성 위주가 되어버려, 게재해야 할 좋은 정보를 간략화해 버리는 경우가 종종 보입니다. PC 버전의 넓은 화면에서 일단 모든 정보를 마음껏 쏟아낸 후, 그것을 어떻게 스마트폰 화면에 담을 것인가?를 생각하는 것이 많은 분들에게 사고하기 쉬워질 것입니다. 스마트폰 버전부터 만드는 경우에는 PC 버전을 그렇게 중요하게 여기지 않고, 더 나아가 예산이 적은 경우에만 좋을 것입니다.

참고로, Google도 2016년 2월경부터 스마트폰 중심의 이해가 되었습니다. 만약 PC 버전만 꽉 채워 만들고, 스마트폰 사이트는 PC 사이트의 간이 버전과 같은 사이트는 순식간에 검색 순위가 떨어집니다. 화면 크기가 좁다고 해서 정보를 아껴서는 안 됩니다.

그래서 기본 와이어프레임도 PC 버전과 스마트폰 버전, 둘 다 만들지만, 수가 늘어날수록 예산도 올라가는 것이 현실입니다. 만약 예산이 적은 경우에는, PC 버전 화면에서 스마트폰 버전 화면이 되었을 때, 어떤 요소가 어떻게 레이아웃 변경되는지 '규칙'을 정해서, 엔지니어에게 의뢰할 수도 있습니다 ( 나중에 엔지니어가 어떤 작업을 하는지도 간단히 설명해 드리겠습니다 ).

규칙을 정하기 위해, 예를 들어, 처음 2페이지와 변화를 알기 어려운 부분만 와이어프레임을 제작하고, 나머지는 엔지니어에게 규칙대로 스마트폰이 되었을 때의 레이아웃을 만들도록 요청하는 경우도 있습니다. 어쨌든, 예산이 있다면 모든 와이어프레임과 디자인을 제대로 만드는 것이 좋을 것입니다.

와이어프레임에 큰 변경이 없다면, 디자인 단계로 들어갑니다.

일단 와이어프레임을 클라이언트나 자사, 동료, 자기 자신이 확인하고, 만약 특별한 문제가 없다면, 디자인입니다. 디자인은 기본적으로 Figma라는 도구를 사용하여 만듭니다.

그중에는 Photoshop이나 XD라는 도구로 만드는 분들도 계십니다. 다만, Photoshop은 기본적으로 사진 편집이나 상당히 그래픽에 공을 들인 웹사이트를 만들 때 사용합니다. XD는 앞으로 사용되지 않게 되고 앱으로서도 지원이 종료될 것으로 예상되므로, 사용을 자제하는 것이 좋을 것입니다. 그 외에도 Illustrator라는 도구로 만드는 사람도 있지만, 인쇄 매체 출신의 그래픽 디자이너인 경우가 많습니다.

기본적으로 코더나 엔지니어에게는 Figma로 만든 데이터가 가장 좋습니다. 웹사이트를 제대로 클릭할 수 있게 하거나, 애니메이션을 추가하거나, Google이 이해하기 쉬운 형태로 구축하는 '코딩'이라는 작업을 진행하기 쉽기 때문입니다. Photoshop을 비롯한 다른 도구로 디자인을 넘기면, 대부분 짜증을 내는 경우가 많습니다.

참고로, 프로그래밍을 전혀 모르는 디자이너가 만든 디자인은 프로그래밍 단계에서 크게 수고가 들어가므로, 공수가 늘어나고 프로그래밍 비용도 비싸집니다. 만약 디자인을 의뢰할 예정이라면, 프로그래밍 방법을 어느 정도 아는 디자이너에게 부탁하세요. 최근에는 스스로 코딩할 수 있는 디자이너가 늘어나고 있습니다.

디자이너는 와이어프레임과 요청에 따라 디자인을 제작합니다. 색상을 입히고, 간격을 조정하고, 글자를 멋지게 배치합니다. 그렇게 해서 비로소 홈페이지다운 모습이 됩니다.

처음에는 주로 메인 페이지만 만들어서 디자인 방향성을 확인하는 경우가 많습니다. 만약 모든 페이지를 만들었는데 디자인 방향성이 틀렸다면, 모든 페이지를 다시 만들어야 하는 엄청난 이중 작업이 됩니다. 우선 메인 페이지를 잘 만들어서 디자인 방향성이 어긋나지 않도록 합시다.

메인 페이지 디자인에 OK가 나오면 다른 페이지를 만들기 시작합니다. 기본적으로 다른 페이지는 메인 페이지 디자인의 분위기에 맞춰 한 번에 만들어 나갑니다. 모든 페이지 디자인이 완료된 단계에서 한 번 확인을 거쳐 OK가 나오면 드디어 프로그래밍 작업입니다.

HTML과 CSS라는 언어로, 전용 텍스트 에디터를 사용하여 프로그래밍(코딩)합니다.

Figma와 같은 디자인 도구로 만들어지는 것은 '이미지 데이터'입니다. 이미지 그대로 홈페이지로 공개할 수도 있지만, 그대로는 클릭으로 화면 전환을 하는 것은 물론, Google에 인식조차 되지 않습니다.

이미지 데이터를 HTML과 CSS라는 언어로 프로그래밍(코딩)함으로써 비로소 Google 검색 엔진에도 인식되어 검색 결과로 표시되게 됩니다.

참고로, Yahoo!의 검색 결과도 Google 시스템을 사용하므로 기본적으로 생각은 같습니다. 이전에는 Yahoo!도 자체 시스템을 사용했지만, 도중에 Google 검색 시스템만 사용하게 되었습니다.

Google에 제대로 인식되고, 더 나아가 홈페이지로서 제대로 기능하게 하려면 HTML과 CSS로 이미지 데이터에 코딩이라는 작업을 해야 합니다. HTML과 CSS를 사용한 구체적인 코딩 방법 등은 이미 많은 글이 존재하므로, 검색해서 찾아보세요.

또한, 지금은닷 인스톨과 같은 서비스에서 온라인으로 동영상으로 기술을 배울 수 있습니다. 만약 관심 있는 분은 기본적으로 무료이고,닷 인스톨에서 코딩 방법을 공부해 보면 도움이 될 것이라고 생각합니다.

참고로, 코딩을 할 때 함께 반응형으로 만들어 스마트폰에서도 볼 수 있도록 합니다. 와이어프레임 제작 시에 잠깐 언급했었죠. 와이어프레임 및 디자인 단계에서 스마트폰 버전의 원형을 만들지 않았다면, 코딩 단계에서 비로소 스마트폰 버전을 확인할 수 있게 됩니다.

페이드인이나 페이드아웃, 그 외의 움직임, 슬라이드나 이미지를 확대하는 박스 등 애니메이션도 코딩 단계에서 구현해 나갑니다. 움직임을 주는 언어는 HTML이나 CSS가 아닌, JavaScript라는 언어로 진행합니다. 엔지니어 중에는 JavaScript를 다루지 못하는 사람도 있으므로, 같은 것이라고 생각하지 않는 편이 좋을 수도 있습니다.

WordPress화 및 회원가입 등 복잡한 시스템 구현은 마지막입니다.

HTML과 CSS로 코딩이 완료된 단계는 기본적으로 '정적 사이트'라고 불리며, 블로그 게시물 작성이나 회원가입 등은 특별히 할 수 없습니다. 사용자가 어떤 액션을 취해도 앱처럼 사용할 수 있는 상태가 아니라, 단순히 '광고'의 역할을 하는 것입니다.

거기서부터 블로그를 업데이트하거나, 회원가입을 시키거나, 쇼핑 사이트로서 무언가를 구매할 수 있도록 하는 것은 또 다른 PHP라는 언어나 Ruby와 같은 언어로 프로그래밍한 후입니다. 그러한 시스템 중 하나로 WordPress라는 시스템이 등장합니다.

WordPress는 기본적으로 블로그 시스템입니다. 관리 화면이나 업데이트 기능 등, 블로그 업데이트 일체를 가능하게 하는 패키지를 의미합니다. 패키지 안에는 php를 중심으로 한 프로그램 파일이 많이 들어있어, 어느 정도 자유롭게 커스터마이징도 가능합니다. 이 프로그램을 지금까지 만든 정적 사이트와 합체시킴으로써, 블로그 기능이나 업데이트 기능을 추가할 수 있습니다.

일반적으로는 WordPress를 사용하면 홈페이지를 쉽게 만들 수 있다고 생각됩니다. 그것은 템플릿을 사용할 수 있기 때문입니다. WordPress에는 템플릿 기능이 있으므로, 템플릿을 그대로 사용한다면 쉽게 홈페이지를 시작할 수 있을 것입니다. 다만, 만약 오리지널 디자인으로 WordPress를 사용하고 싶다면, 일반적인 홈페이지 제작 절차를 밟아야 합니다.

오리지널 또는 템플릿을 사용하는지에 따라, 공수가 크게 달라집니다. 오리지널 디자인으로 WordPress를 사용한다는 것은, HTML과 CSS, 그리고 javascript를 사용하여 정적인 홈페이지를 만든 후에, WordPress 시스템을 합체시키는 절차가 됩니다. 그러므로, 쉽게 만들 수 있다는 것이 아니라, 오히려 일반적인 사이트를 만드는 것보다 수고가 더 듭니다.

또한, 회원가입이나 쇼핑 사이트 등을 만들 때도, 여기에서 더 나아가 프로그래밍을 해야 합니다. 시스템 개발이라고 불리는 단계가 홈페이지 제작의 마지막 단계가 됩니다. 이상의 절차로, 시스템까지 모두 만들고 나서야 비로소 홈페이지가 완성됩니다. 물론, 정적으로 괜찮다면, 시스템 구현 단계는 밟지 않아도 되는 공수입니다.

요약

어떠셨나요? 홈페이지를 제작하는 절차에 대해 처음 알게 된 분도 계실 것이라고 생각합니다. 실제로, 클라이언트와 함께 일을 하든, 자사 및 스스로 제작하든, 팀원 모두의 머릿속에 모든 흐름이 들어있으면, 일이 더 수월하게 진행됩니다.

사전에 인식 차이나 불일치, 무리한 일정을 세우는 일 없이, 디자이너나 엔지니어와 원활하게 대화할 수 있게 될 것입니다.

지금, 홈페이지 제작은 상당히 일반적인 것이 되었습니다. 어떤 기업이나 활동도, 이제는 홈페이지 없이는 '져버릴' 정도로 존재감을 발휘하는 무기가 되었습니다. 다만, 그럼에도 불구하고, 웹 제작의 과정이나 방법, 수단 등이 잘 알려지지 않은 채, 오히려 오해된 정보가 만연해 버리고 있는 것은 아닐까, 하고 느끼기도 합니다.

절차와 방법, 그리고 기술과 공수에 대한 이해가 깊어짐으로써, 프로젝트를 더욱 원활하게 진행할 수 있게 되지 않을까요? 부디, 홈페이지에 대해 공부하고, 할 수 있는 것과 할 수 없는 것을 파악해 보세요. 새로운 가능성이나 해결책도 여러 가지로 보일 것입니다.