웹사이트 제작 업체 실무 디자인 및 기능을 이야기하다.

웹사이트 제작 업체 오엠지 디자인 사무실 모니터

오늘의 주제는 홈페이지 제작 사례 보다는 웹사이트 제작 업체의 실무 디자인 및 기능에 대한 이야기가 될 것 같습니다. 실제로 본사 뉴스룸 디자인 과정에서 필자는 웹사이트 기능에 초점을 맞추면서 디자인을 함께 고려했기 때문이죠. 이와 관련해 몇 가지 이야기와 관련 포트폴리오를 준비해 보았습니다.

웹사이트 제작 실무와 이론의 차이를 이야기하다.

개인적으로 최근 많이 느껴지는 게, 웹사이트 제작 목적과 개발자가 생각하는 디자인의 간극입니다. 이전부터 계속 생각했던 부분이지만 그때는 단순히 검색엔진 최적화를 고려하는 데, 고민했다면 이번 본사 뉴스룸 리뉴얼은 기존 사용했던 편집기가 아닌 구텐베르크 블록을 사용하면서 이 부분에 대한 통찰?일 수 있는 생각이 들었습니다.

OMG DESIGN NEWS ROOM

이번 웹사이트 제작 건은 앞서 이야기 한 것 처럼 본사 워드프레스 뉴스룸, 즉 블로그 디자인이라 할 수 있습니다. 일반적으로 이번 스타일은 단순한 뉴스 사이트로 볼 수 있지만 나름 깊은 고민을 통해 사용자 인터페이지와 경험을 개선하기 위해 노력한 편이죠.

이 과정에서 웹사이트 제작 업체가 모든 프로젝트에서 기준으로 삼아야 할 본질에 대한 것을 많이 고민해 보았습니다.

그것은 보여지는 기능이 아닌 실제 독자가 생각하고 원하는 바를 충족 시키면서 웹사이트 운영 목적에 부합하는 구조입니다. 어쩌면 화려한 디자인이나 검색엔진 최적화 구현보다 이것이 더 중요한 게 아닐까 하는 생각이 듭니다.

이론상의 UI/UX 디자인과 실제 기능하는 웹사이트 제작 본질은 차이가 분명합니다. 

단순히 보여지는 것이 아닌 방문자가 원하는 구조는 물론 그것을 통해 브랜드 혹은 누군가가 바라는 목적을 달성할 수 있는 구조를 만드는 것, 그것이 가장 가치 있는 웹개발 에이전시 역할이 아닐까요?

무엇을 해야 하는지 고민했는가?

저는 오늘 이 글에서 웹사이트 제작 의뢰인과 개발자 모두에게 이 질문을 던지고 답을 찾고자 합니다. 지금 시작하고자 하는 프로젝트로 얻고자 하는 게 무엇인지 진지하게 고민하지 않으면 최고의 결과를 절대 얻지 못하기 때문이죠.

웹사이트 제작 관련 요소들 벡터

실제로 본사 마케팅 블로그 웹사이트 제작은 아직 다 끝나지 않았지만 몇 개월의 콘텐츠 제작 기간 동안에 해당 사이트를 어떤 구조로 만들지에 대한 고민은 디자인이 시작되고 난 후부터였죠.

하지만 그런 방식은 처음부터 잘못된 접근이며 실제 실무 디자이너라면 디자인이 시작되기 전 이미 전체적인 구조는 물론 콘텐츠 하나 하나가 전부 계획하에 작성 되어야 합니다. 예를 들어 뉴스 사이트인 경우 카테고리 하나도 게시될 홈페이지 디자인을 고려해서 구조를 짜야 하는 것 처럼요.

이러한 요소들 하나 하나가 모여 사용자 경험을 만들고, 잘 짜여진 인터페이스를 구현할 수 있는 데, 이론으로 배운게 실무에서 이번 처럼 와 닿았던 적은 처음 이었습니다.

글이 조금 어렵지만 간략히 요약하자면 초기 사이트 맵을 구성할 때, 최종 목적이 우선 되어야 한다는 것입니다. 단순히 어떤 디자인을 구현할 것이지가 아닌 목적을 먼저 분명히 하고, 그에 따라 최적화된 사이트 구조 안에서 적절한 디자인을 적용할 수 있어야 완벽한 하나의 웹사이트 제작 과정이라 할 수 있는 것이죠.

알수록 어렵고 할수록 배우는 워드프레스 웹사이트 제작

이번 웹사이트 제작 역시 워드프레스 기반이며, 이제 9년차 워드프레스를 다루고 있지만 계속 배우고 새로운 걸 도전해야 하는 직업이란 걸 또 한번 느낍니다. 그리고 앞으로 몇 년이 지나도 이 생각이 그대로 유지될 때 필자와 회사는 조금 더 발전이 되었을거라 생각됩니다.

이번에 제작한 본사 패밀리 사이트는 저희가 관리하는 브랜드 홍보 및 웹사이트 상위노출 마케팅을 원하는 고객을 위해 만들었습니다. 즉 목적인 광고용인 것이죠.

그래서 업종이나 제품에 맞게 콘텐츠 하나 하나를 커스텀 디자인으로 발행할 수 있는 구조를 만들었고, 프로모션 관련 페이지를 제공할 수 있도록 구텐베르크 패턴 블록을 다량으로 제작하였습니다. 물론 하나 하나의 블록 디자인은 용도에 따라 “동기화 및 비동기화”구조로 만들었기에 언제든 콘텐츠 편집 없이 추천 업체나 링크를 변경할 수 있게 하였습니다.

이 또한 처음 부터 계획한 것이 아니라 이번 웹사이트 제작 과정에서 나온 아이디어인데, 이를 구현하기 위해 웹 구축에 소요된 시간은 몇 배가 되었고, 아직도 마무리가 되지 않았죠.

하지만 분명 지금껏 저희가 제작해온 사이트와 다른 방식의 결과이며 이를 앞으로 제작할 사이트에 장점을 적용할 수 있게 된 계기가 되었습니다.

오늘 글은 조금 난해한 내용일 수 있지만 쉽게 생각하면 단순합니다. 디자인이 먼저가 아니라 웹사이트 제작에선 기능에 맞는 디자인이 되어야 한다는 상식적인 원칙을 그동안 구현하지 못했던 우리의 실수를 다시 반복하지 않겠다는 다짐과 같은 내용이며, 이 글이 웹디자인에 관심 있는 당신에게도 인사이트가 되었으면 합니다.

쓸데 없고, 긴 글을 끝까지 읽어 주신 분들에게 감사함을 전합니다.

제작 방식, 기간, 비용 가이드

홈페이지 제작 비용 - 자사 사이트
제작기간 - 1달?
디자인툴 - 워드프레스
테마 - Kadence
서버 - 자체 호스팅