디자인 분석을 통한 워드프레스 강의 카카오 웹사이트

안녕하세요. 워드프레스 강의를 주제로 포스팅을 발행하고 있는 오엠지 디자인 홈페이지 관리자 입니다. 오늘 부터는 본격적으로 워드프레스 기반 웹사이트를 분석하고 구조와 기능에 대한 설명을 시작해 볼텐데요. 첫 시간인만큼 누구나 알만한 카카오엔터프라이즈 디자인을 준비했습니다.

물론 워드프레스 기반 사이트이며, 페이지 구성이나 디자인 방식은 물론 인터랙션 까지 자세히 설명 드릴테니 관심 있는 분들에게 도움이 되었으면 합니다.

 

워드프레스 사이트 카카오엔터프라이즈 디자인 분석 강의

해당 사이트는 잘 아시는 것 처럼 카카오 그룹이 자사 개발 서비스 소개를 위해 운영하고 있는 워드프레스 기반 웹사이트 입니다. 실제로 페이지 구성에서 소개는 카카오의 기업 문화 소개를 포스팅 기반으로 디자인 되었다는 걸 알 수 있습니다.



보편적으로 이러한 형식은 주로 뉴스룸 형태라고 하는 데, 홈페이지 디자인 처럼 구축한 상태에서 대다수 콘텐츠는 페이지가 아닌 포스팅을 사용하고 있다는 게 워드프레스 사이트 특징을 잘 보여주는 결과물이라 할 수 있습니다.

디자인적인 측면에서 편집스러운 화려함은 보이지 않지만 역시 워드프레스 홈페이지 제작 분야에서 첫 번째로 꼽히는 제이티 스튜디오의 실력을 곳곳에서 볼 수 있는 멋진 뉴스룸이라 생각됩니다.

구성적인 면에서 평범하지만 방문자가 정보를 빠르게 찾을 수 있는 UI/UX 디자인 요소도 흠잡을 곳이 보이지 않습니다. 개인적으로 이런 형식의 디자인을 필자가 좋아하는 이유도 있지만 현재 카카오엔터프라이즈 웹사이트 랜딩은 워드프레스를 다루는 사람이라면 누구나 밴치 마킹을 통해 유사한 사이트 제작에 도전해 볼 수 있을 정도로 구성이 쉽지만 일반 블로그 처럼 보이지 않기에 더 매력적이죠



다만 실제 배우는 입장에서 이를 바탕으로 디자인할 때 팁은 해당 사이트가 일반적인 워드프레스와 다르게 자체 제작 테마를 사용했으며, 플러그인이 아닌 코딩으로 디자인 되어 참고할 수 있는 디자인 소스가 없기에 자신이 가장 잘 다룰 수 있는 테마와 디자인 편집기를 선택해 각 섹션을 참고해 보는 게 좋습니다.

 

워드프레스 강의, 카카오 웹사이트 디자인 따라하기

먼저 앞서 이야기한 것 처럼 이번 워드프레스 강의에서 제가 여러분에게 카카오 엔터프라이즈 사이트를 쉽게 따라하기 위해서는 디자인 편집기 선택이 중요할 것으로 보입니다.



개인적으로는 포스팅이 주력 콘텐츠라는 점에서 구텐베르크 블록 편집기 활용을 추천하고 싶은 데, 모든 디자인을 구현하려면 테마 역시 블록 편집기 애드원을 지원하는 형태를 준비하는 게 좋습니다.

예를 들어 케이던스 테마와 케이던스 블록을 기본적으로 준비한 상태에서 디테일을 표현하려면 케이던스 블록 프로 버전이 필요하죠. 랜딩페이지 표현 방식은 어려움이 없습니다.

메인 인트로를 디자인하고 다음 섹션에서 2컬럼을 지정한 뒤, 스크롤 인터랙션이나 스티키 옵션을 넣어 밋밋한 디자인에 생기를 넣는 것도 나쁘지 않을 것 같습니다.



해당 사이트 제작에서 가장 중요한 디자인 요소는 페이지 구성이나 디자인 보다는 각 포스팅 툴을 블록 패턴으로 잘 구성하는 것이며, 타이틀과 텍스트 크기와 간격을 잘 조절해 가독성을 높여야 하는 것입니다.

이는 모든 워드프레스 뉴스룸 디자인에서 핵심적인 부분이니 꼭 기억하세요.

그리고 마지막으로 이러한 보도 형식의 웹사이트 제작 시, 속도 개선에 필요한 요소를 적용하는 건 기본적인 부분이니 이미지 확장자를 WEBP로 실행하고, 서버 사양 역시 CPU와 메모리 크기를 될 수 있으면 크게 설정하는 게 중요합니다.

오늘은 이렇게 제이티 스튜디오가 만든 카카오 엔터프라이즈 사이트를 만드는 방법에 대해 전해 드렸습니다. 이와 같은 디자인을 직접 제작해 보시길 원하거나 외주로 맡겨 자사 채널로 운영하려는 분은 언제든 본사에 문의 바랍니다.

더 자세한 정보와 함께 제작 방식을 전달해 드리겠습니다.