홈페이지 구축 업체는 정말 많습니다. 전문 웹에이전시도 꽤 많습니다.

웹에이전시 선택 시 제작비용 기준만으로 이 업체다! 라고 선별하기는 어렵습니다. 그런데 워드프레스 구축 업체를 선별하기는 좀 더 어렵습니다. 왜냐하면 워드프레스 기반의 구축업체를 선별하기 위해서는 고객이 워드프레스에 대한 장단점을 이해하고 있어야 하며 동시에 웹에이전시의 능력도 파악해야 하는 두 가지 측면이 있기 때문입니다. 만약 워드프레스 기반으로 뭔가 구축을 고민하고 게신 분이라면 워드프레스에 대한 지식이 없더라도 매우 간단한 방법으로 워드프레스 구축 업체를 선정할 수 있는 방법을 알려 드리겠습니다.

워드프레스 기반의 웹사이트 구축을 위해서는 크게 다음의 3가지 요소가 필요합니다.

한편 구축을 대행하는 웹에이전시에서는 다음의 구분된 작업 공정이 있습니다.

워드프레스 테마, 플러그인 그리고 콘텐츠는 웹에이전시의 어떤 작업 공정을 통해서 워드프레스 기반의 웹사이트가 구축되어 질까요?

워드프레스 테마 설계 및 디자인 그리고 개발, 플러그인 선별 및 개발 등 위의 다이어그램과 같이 워드프레스 개발 요소와 에이전시 작업 공정은 유기적으로 연결되어 있습니다. 이러한 작업을 통해서 워드프레스 기반의 웹사이트가 구축됩니다. 즉 워드프레스로 성공적인 구축을 하기 위해서는 웹에이전시에서 제공하는 기획, 디자인, 개발 그리고 유지보수 능력이 기본적으로 제공되어야 가능할 수 있다는 것입니다.

이제 워드프레스 구축 업체를 선별하는 매우 간단하고 실패할 확률이 적은 방법을 알려 드리겠습니다.

해당 구축업체의 현황, 소개, 포트폴리오에서 워드프레스에 관련된 모든 사항을 제거하고 보십시오.
그러면 순수한 업체의 구축 파워가 보이기 시작할 것입니다. 똑같은 워드프레스를 사용하는데 납품 품질과 대상이 다른 이유는 바로 구축 에이전시의 기획, 디자인, 개발의 조합인 구축 능력에서 차이가 나기 때문입니다.

이러한 구축 능력은 오픈소스라 너무나 쉬울 것 같았던 워드프레스 플러그인의 선별과 테마 제작 능력에서도 차이가 있는 것이 사실입니다. 실제로 워드프레스를 조금이라도 구축 목적으로 경험해 보신 분들이 공감하는것은

플러그인과 테마는 실제로 설치 시 보는것과 차이가 많이 난다. 혹은 2% 부족하다. 라고 말씀하십니다.

그 때문에 납품에 책임을 지고 있는 구축 업체는 워드프레스에 대해서 매우 정통해 있어야 함은 물론이고, 부족한 부분을 보완하고 개선시킬 수 있는 부분을 포함한 종합적 구축 능력이 결국 워드프레스 기반의 웹사이트 구축에서 높은 품질의 관건이 됩니다.

워드프레스는 블로그 및 CMS 기능을 가진 편리한 플.렛.폼.일 뿐입니다. 홈페이지에 들어갈 콘텐츠의 디자인 및 가공은 여전히 순수하게 디자인 능력의 영역으로 남아 있습니다. 저품질의 콘텐츠 디자인을 워드프레스 기반에 올려 놓는다고 해서 디자인 품질이 높아지지 않겠지요? 같은 맥락으로, 보기에는 너무나 뛰어난 워드프레스 프리미엄 테마 조차도 실제로 설치해 보면 보는 것과는 달리 부족한 부분들이 있습니다.

결론적으로 웹에이전시의 구축 능력과 편리한 워드프레스의 기능이 제대로 여러 각도에서 조합이 되었을 떄 비로소 고객이 원하시는 웹사이트가 구축될 것입니다. 오픈소스라 진입 장벽이 낮은 워드프레스를 기반으로 한 전문 업체들이 계속 늘어가고 있습니다. 검색만 하면 쉽게 무료로 얻을 수 있는 워드프레스 플러그인과 테마로 즉시 원하는 수준의 웹사이트를 구축할 수 있을 듯 하지만, 워드프레스는 깊이 들어갈수록 생각만큼 절대 쉽지 않은 플렛폼임을 아시게 될 것입니다. 이러한 부분은 책에도 나오지 않으며 실제 구축을 여러 번 해봐야 경험할 수 있는 영역임을 워드프레스 전문가들은 이야기 합니다. 본 포스트를 통해서 워드프레스의 장점을 최대한 살리며 만족할 수 있는 수준의 웹사이트를 구축하시는데 도움이 되시길 바랍니다. 감사합니다.

* 메타브레인은 1998년부터 지금까지 웹에이전시 업무를 제공하는 소프트웨어 회사를 운영해 오고 있으며, 대한민국에서 워드프레스 기반으로 주요 기업들의 웹사이트 구축을 가장 많이 한 워드프레스 전문기업이기도 합니다. 더 자세한 사항은 메타브레인의 워드프레스 구축 전문 브랜드인 metaPresso 를 살펴 보세요.

우수한 Pinterest 도구와 애플리케이션을 모았습니다.

Embrace the Awesome CSS 3D Transforms

CSS 3D 변환 애니메이션 개발에 유용한 정보들과 도구를 모았습니다.

20 Pure Websites with Clean White Backgrounds

보기만 해도 마음이 깨끗해지는 화이트 바탕의 웹사이트를 소개합니다.

Convert CSS Into LESS With Css2Less

복잡하고 긴 CSS를 보다 간편하게 사용할 수 있는 LESS 코드로 바꿔주는 사이트를 소개합니다.

20 Inspiring Examples of Big Backgrounds in Web Design

Grid와 Contents에 구애 받지 않고 배경이 강조된 20개의 웹사이트를 살펴보세요.

가볍고 심플한 스크롤링 애니메이션 Parallax 스크립트를 소개합니다!

jQuery NailThumb from any image to any thumbnail with full control

jQuery NailThumb 사용하여 손쉽게 Thumbnail 이미지를 만들어 보세요.

10 Fresh and Useful jQuery Plugins

새로나온 따끈따끈한 jQuery 플러그인을 맛보세요.

10 Incredible Corporate Websites

감탄사가 저절로 나오는 너무나 멋진 10개의 기업 웹사이트를 살펴보세요.

7 Webmaster Tools That Will Make Your Job Easier

웹사이트 관리에 효율적인 7개의 웹마스터 툴을 소개합니다.

신속하고 명확한 정보 전달을 하고 있는 멋진 인포그래픽 디자인.

7 Useful Pinterest Tools You Should Know

7가지 유용한 Pinterest 도구를 사용하여 더 쉽게 정보를 공유하고 더 많은 친구를 사귀어 보세요.

30+ Stunning Admin templates

딱딱한 관리자 페이지를 산뜻하게 바꿀 수 있는 30가지 관리자 화면 템플릿을 소개합니다.

Createjs

HTML5 작업을 위해 설계된 자바스크립트 라이브러리와 툴 세트를 활용해 보세요.

Weekly Web Design Inspiration #70

창조력과 감성을 자극하는 멋진 웹사이트 디자인 모음!

마우스의 방향에 따라 반응하는 방향 인식 마우스 효과로 귀사의 갤러리 페이지를 참신하고 멋지게 다듬어 보세요.

A javascript library for multi-touch gestures

터치 디바이스에서 Double Tap, Hold, Transform 등의 멀티 터치 이벤트를 쉽게 구현할 수 있는 가볍고 독립된 JavaScipt 라이브러리를 소개합니다.

23 Fantastic Examples of Dark Colors in Web Design

어두운 컬러를 컨셉으로 디자인한 모던한 느낌의 사이트들을 소개합니다.

Infographic: The Case for Facebook

많은 CEO들이 직원들의 SNS 사용을 허용하는 이유

Typographical Infographics That’ll Make You Go “Wow!”

타이포와 기호를 적극 활용하여 우수한 정보 시각화를 보여주고 있는 인포그래픽 사례.

멋있고 적절하게 시간차 스크롤링 기법을 활용한 웹사이트 18가지를 소개합니다.

15 Most Excellent Free Online HTML5 Games

Best 무료 온라인 HTML5 게임 – HTML5 의 부드러운 모션 콘트롤을 체감할 수 있습니다.

The Top 10 Web Design Buzzwords and Hot Topics for 2012

2012년 웹 디자인에 대한 주요 관심사를 알아보세요.

Responsive Horizontal Layout

가로형태의 반응형 레이아웃을 활용해 보세요.

Showcase of Interactive Websites Powered by jQuery

jQuery와 HTML, CSS 만으로 다이나믹하고 유니크한 느낌을 보여주고 있는 웹사이트들을 소개합니다.

jQuery와 HTML, CSS 만으로 다이나믹하고 유니크한 느낌을 보여주고 있는 웹사이트들을 소개합니다.

Web Design Trends in Apparel Online Stores

기본에 충실한 균형있는 정보 설계와 트렌디한 비주얼 브랜딩의 결합 – 2012년 의류 쇼핑몰 웹사이트 디자인 동향.

Why Content Matters for SEO {Infographic}

왜 SEO가 중요할까요? 온라인 마케터 대상의 설문 결과를 정리한 인포그래피.

The anatomy of content marketing – the heart of online success

성공적인 온라인 마케팅의 핵심인 콘텐츠 마케팅을 해부합니다!

8 Best HTML Validation Resources

귀사의 웹사이트 표준화를 우수한 HTML 유효성 검사기로 다시 한번 체크해 보세요.

멋진 일러스트, 핸드 드로잉 요소들이 들어간 웹사이트를 감상해보세요!

HTML5 + WebGL: 3D Our Web

3D Web의 현재 – HTML5와 WebGL(Web-based Graphics Library)의 만남.

22 Free and Premium Well-Designed Web Form PSD Files

단순한 입력폼에서도 감각이 돋보이는 22개의 무료 PSD 파일을 살펴보세요.

CONDENSED FONTS: THE GOOD, THE BAD, THE UGLY

압축된 글꼴 사용의 장단점을 알아보시고 주의할 사항과 그에 대한 대안을 살펴보세요.

jQuery Scroll Path

경로를 정의하여 자연스러운 스크롤 효과를 구현한 jQuery Scroll Path 를 소개합니다.

사이트 · 기획 방향

최신의 기법을 활용한 페이지 슬라이딩과 연출
자료를 받아보니 사이트의 내용이 많지 않고 아직은 Syntasia가 어떤 회사인지 모르니 콘셉트 위주로 어필 할 수 있는 방향이 좋으리라 여겨 최신기법의 비주얼 위주의 심플한 사이트들을 몇 가지 방향으로 구분하여 제시하였습니다.

메타프레소 입장에서도 워드프레스로 최신의 기술을 활용한 재미있는 테마를 만들어 볼 기회이고, Syntasia에서도 새롭게 해보자는 저희의 제안을 흔쾌히 받아들여서 하나의 페이지 내에서 슬라이딩 네비게이션 되는 HTML5기법을 활용하여 애니메이션 효과를 시도해 보기로 하였습니다.

게임과 회사소개, 포스트 개시가 필요한 뉴스나 구인공지는 별도의 메뉴로 두어 총 4개의 메뉴로 구성되었습니다. 막상 시작해보니 각각 다른 콘셉트를 보여주기 위해 디자인 시안이 3개가 되어 디자인 공수도, 연출을 위한 노력도 예상보다 많이 소요되는 사이트였습니다.

사이트에 직접 방문하셔서 슬라이딩 효과를 살펴보세요.
http://www.syntasia.com

디자인 방향

보라색 판타지 공간 Syntasia
Syntasia의 뜻은 무엇일까? 어떤 콘셉트를 담고 있을까? 판타지아의 합성어이며 여러가지 판타지 중에 이상한 나라의 앨리스 같은 판타지이며 화려하게 보여줬으면 좋겠다. 라는 어려운 과제를 받아들고 머릿속에 상상의 그림을 그려 보았습니다.
신비한 보라색(씬타지아의 로고칼라) 공간에 각각의 메뉴로 슬라이드 이동하면서 해당 메뉴에 매치되는 객체들이 마치 마법사가 마술봉을 휘두르듯 반짝거리면서 나오게 하면 어떨까 하는 생각에 관련자료를 찾기 시작했습니다

그러기 위해서는 플래시를 쓰지 않으면서도 유연한 에니메이션이 필수적이었고 자연스러운 연출효과를 위해서 수정에 수정을 거듭해 다듬어나갔습니다. 그렇게 탄생한 보라색 판타지 공간, 반짝반짝 Syntasia의 사이트입니다.

야구 게임인 Baseball Heroes의 경우 첫 메뉴인 트레일러에만 힘을주고 게임의 비주얼을 활용하여 깨끗한 공간감을 표현하고 주인공과 캐릭터들이 각 메뉴별로 출현하여 하나의 이야기로 이어지도록 연출하였습니다.

개발 방향

WordPress 최신버전(3.3.1)이 적용된 사이트이며 jQuery를 이용한 Parallax효과와 애니메이션 요소를 매끄럽게 접목하기 위한 퍼블리싱팀과 개발팀의 많은 노력이 들어간 산물입니다.
각각의 섹션간 구분없이 이어지는 디자인 콘셉트 안에서 Parallax효과를 자연스럽게 구현하기 위한 많은 수학적 계산과 퍼블리싱 레이아웃이 반영되었으며, UI상의 빠른 응답을 위한 마크업의 미니멀리즘을 위해 노력하였습니다.

주요 기능

1) 소셜 미디어 연계 : 페이스북, 트위터, 구글플러스원의 Share Count를 커스텀 디자인에 맞게 가져오도록 구현하였으며 페이스북 페이지상의 최신데이터를 가져오도록 API를 통해 연동하였습니다.
2) Vimeo 연동 : Vimeo에서 서비스 되고 있는 트레일러 동영상을 실행하도록 구현하였습니다.
3) Google Maps : 회사 위치를 정확하게 표시할 수 있도록 구글맵 API를 이용하였으며 손쉽게 주소를 변경할 수 있도록 지오코딩 기능을 포함하였습니다.

HTML5, CSS3 및 JavaScript 기반의 프리미엄 jQuery Image Slider 로 다양한 슬라이더 기법을 시도할 수 있습니다.

The jQuery HTML5 Audio / Video Library

jQuery HTML5 기반의 오픈소스(GPL/MIT) 오디오/비디오 라이브러리를 소개합니다.

HTML5 Canvas Tutorials

그래픽 이미지나 차트, 애니메이션 등을 동적으로 나타낼 수 있는 HTML5 Canvas 요소를 기초부터 단단하게 배울 수 있는 사이트를 소개합니다.

CSS Social Buttons

CSS 클래스 조합만으로 다양한 형태와 느낌의 Social Button 을 만들 수 있습니다.

Cognition & The Intrinsic User Experience

사용자의 명확한 정보 인지를 위해 고려해야 할 기본적인 6가지 사항들을 살펴보세요.