사이트 · 기획 방향

문화공간 숨도
숨도를 웹사이트를 기획하면서 가장 중요했던 기획 포인트는 공간과 이야기였습니다. 물론 디자인 방향으로써 공간에 대한 표현을 많이 했지만, UI상의 구조적인 공간 표현에 있어서도 많은 노력을 하였습니다. 또한 기존 숨도 카페에서 운영하던 콘텐트를 이전 하는 사이트 이다보니 기존 콘텐트에 대한 파악도 빠질수 없는 절차였습니다. 일하는 내내 즐거웠던 숨도 사이트. 완료 후에도 기분좋은 사이트로 자주 방문 하게 될것 같습니다.

디자인 방향

숨도의 철학과 이야기가 담아있는 공간
전통과 현대, 추상과 형상의 경계를 표현한 문하공간 숨도의 서비스 철학을 기반으로, 숨도의 이야기를 만들어 내는 작은 일러스트 요소들과 폰트타입 그리고 공간의 미를 부각시키며 은유적인 숨도의 이야기들과 메세지를 명확히 전달 할 수 있는 화이트톤의 밝은 룩엔필 스타일로 작업을 진행하였습니다.

개발 방향

WordPress 3.3 최신버전이 적용 된 사이트이며 워드프레스 기본기능을 최대한 충실히 활용하여 사이트 속도 개선을 위한 다양한 노력이 접목된 사이트 입니다.
또한 WordPress 3.3 워드프레스 테마가 접목되어 좀 더 편리하고 간편한 사이트의 관리가 돋보이는 사이트 입니다.
그리고 대쉬보드 Fly-out 표현, 어드민바의 간소화, 업로드의 편리함등 WordPress 3.3 의 편리함을 만끽할 수 있는 사이트 입니다.

주요 기능

1) 멀티 사이트 : 추후 생성될 수 있는 사이트를 예산하여 하나의 플렛폼으로 관리할 수 있는 멀티 사이트로 구축 하였습니다.
2) 소셜 미디어 연계 : 공유하고 싶은 포스트와 페이지를 바로 가져갈 수 있게 페이스북과 공유 가능하도록 개발 하였습니다.
3) Picasa 연계 : Picasa에 등록된 이미지를 어느 포스트에서든 사용 할 수 있도록 구축 하였습니다.
4) Mailing System : 메일 수집 및 관리, 발송까지 한번에 되는 기능을 추가하여 생선되는 콘텐트를 발행하도록 하였습니다.
5) Disqus : 소셜댓글 서비스 Disqus를 사용하였습니다.
6) SEO 강화 : 제품 홍보 사이트로써의 역할을 다하기 위해 SEO를 강화하였습니다.

메타브레인에서는 2012년 미래의 브레인을 모집하고 있습니다.

자신의 꿈을 위해 포기하지 않는 프로페셔널한 근성과 열정.
유연하며 힘찬 커뮤니케이션을 위한, 건강한 신체와 바른 정신을 가지고 있는 미래의 브레인들을 기다리고 있습니다.

준비가 되어 있으신가요?
자! 2012년 메타브레인과 함께 앞으로 나아가길 원하신다면 지금 지원하세요.
메타브레인은 두근거리는 미래의 기회와 환경을 제공하겠습니다.

> 분야별 자격요건 및 입사지원 하기

Beyond Change !

사이트 · 기획 방향

Prorance
많은 제품 과 제품군을 네비게이션에 모두 소화하는 구성을 만들었으며 블로그에서 운영하는 콘텐트를 접목하여 단순 제품홍보 사이트가 아닌 브랜드 인지도를 올릴 수 있는 사이트로 제작되었습니다. 또한 활발한 페이스북 활동을 어필하는 사이트로 구성하였으며 별도 운영 중이던 네이버 카페로 이동이 가능한 경로도 열어 두었습니다.

디자인 방향

고급스럽고 심플한 브랜드 웹사이트 아이덴티티 구축
프로랑스의 고급스럽고 세련된 이미지를 은은한 화이트실버/블랙의 컬러톤과 심플한 레이아웃을 통해 프로랑스만의 브랜드 아이덴티티를 부각시키고자 하였으며, 제품과 모델 이미지를 메인 슬라이더 영역에 전면 부각시켜 기능과 감정요소를 함께 연출하는 스타일로 디자인 되었습니다.

또한 모바일과 영문 사이트에서도 일관성있는 룩엔필과 정보 접근성을 고려하여, 시각적으로 명확하게 주요 영역을 구분하는데 주안점을 두고 고객의 편의를 도모할 수 있도록 디자인 작업을 진행하였습니다.

개발 방향

WordPress 버전이 업데이트 되면서 예전에 시도 안했던 사안들에 대해 좀더 편의성을 주고자 많은 노력을 하였습니다. 베너영역을 관리자가 직접 추가 삭제 할수 있도록 바꾼 부분이라던지 사이트 속도 개선을 위한 노력 등 다양한 시도가 접목된 사이트 입니다.
그리고 RWD를 적용하여 모바일 브라우저에 최적화된 사이트로 제작하였습니다.

주요 기능

1) 멀티 사이트 : 영문과 한글 사이트를 하나의 플렛폼으로 관리할 수 있도록 구축 하였습니다.
2) 소셜 미디어 연계 : 공유하고 싶은 포스트와 페이지를 바로 가져갈 수 있게 트위터, 페이스북 등 다양한 소셜 미디어와 공유 가능하도록 개발 하였습니다.
3) SEO 강화 : 제품 홍보 사이트로써의 역할을 다하기 위해 SEO를 강화하였습니다.
4) 모바일 최적화를 위해 RWD를 적용하여 모바일에서도 잘 볼 수 있는 사이트로 구축하였습니다.

반응형 웹 디자인 – 25 가지의 jQuery 플러그인으로 쉽게 만들어 보세요.

21 Inspiring Examples of Typography in Web Design

뛰어난 타이포그라피가 돋보이는 21가지 웹디자인을 소개합니다.

How to Design a Mobile Responsive Website

일목요연하게 정리된 Responsive Website 구축시 고려할 점과 프로세스 예시를 살펴보세요.

30 Useful Infographics for Web Designers

늘 바쁜 웹 디자이너를 위한 30가지 유용한 인포그라피를 살펴보세요.

Simply to create a great personal website imcreator

간단하게 멋진 개인 웹사이트를 만들 수 있는 imcreator 을 소개합니다.

세련된 테마 디자인 컨셉과 표현으로 꾸준한 방문자를 확보하고 있는 우수한 블로그들을 소개해 드립니다.

jQury File Validator

사용자에게 초과되는 업로드 파일 용량과 잘못된 유형을 경고해 줄 수 있는 jQuery File Validator 활용

iOS 5 GUI PSD (iPhone 4S)

Apple의 업데이트된 iOS 5 GUI를 PSD 파일로 만나보세요. iOS 4와의 미세한 차이점을 살펴보실 수 있습니다.

Your Free Customisable Share Counter

당신의 컨텐츠가 얼마나 공유되었는지 한 번에 모아서 보여주고 싶다면 Share Counter를 써보세요.

Social Network Website Chime

페이스북과 트위터의 장점을 매력적으로 병합한 소셜 네트워크 서비스 Chime.in 을 소개합니다.

장르별 음악을 멋지게 시각화한 디자인과 사운드의 결합을 만나보세요.

500+High-Quality Web UI Kit Elements

하이퀄리티의 웹 UI Kit 로 멋진 웹 사이트와 모바일 앱을 설계해 보세요.

25 Cool Print Advertising Examples

작은 상상력을 시작으로 기발하고 참신한 아이디어를 도출해낸 25가지 광고 비주얼를 감상해 보세요.

What’s new for web designers

디자이너, 퍼블리셔, 프로그래머 모두에게 도움이 되는 다양한 어플리케이션과 웹 서비스를 소개합니다.

Writing Better HTML & CSS (Slides from FOWA London)

시맨틱 마크업과 스타일시트를 군더더기 없이 깔끔하게 작성하는 방법을 알려드립니다.

우울한 기분마저 사라지는 유쾌한 옐로우 컬러가 돋보이는 웹사이트 디자인을 살펴보세요.

Top 10 tips for naming your app

성공하는 APP 은 이름부터 다릅니다. 성공적인 APP 이름을 짓는 방법을 참고해 보세요.

Showcase of Delightful Coffee Websites for Inspiration

생활속 편안한 친구와 같은 커피. 브라운 컬러로 아름답게 디자인된 커피관련 웹사이트를 만나보세요.

jQuery 1.7 Beta Release Preview

jQuery 1.7 첫 번째 베타판이 나왔습니다. 개선한 기능과 고친 버그가 무엇인지 미리 알아보십시오.

30+Best Resource Free Website Templates

퀄리티 높은 다양한 종류의 무료 웹사이트 템플릿 30가지를 만나보세요.

사이트 · 기획 방향

친환경 브랜드 Ecotique
Ecotique 사이트 에서 가장 중요한 점은 제품을 어떻게 잘 보여주느냐 하는 고민이였습니다. 물론 제품의 탄생배경 또한 중요했고 사용자에게 제품에 대한 이해와 보기쉬운 설명을 제공하기 위해 가독성을 높이고 제품 사진을 크게 배치하여 제품 홍보에 가장 큰 주안점을 두었습니다.
또한 새롭게 출시하는 제품인 만큼 SEO를 강화하여 구축하였으며 각종 SNS 연계와 소셜 댓글 서비스를 활용하여 최신 트랜드에 맞는 사이트로 제작 하였습니다.

디자인 방향

에코띠끄가 있는 깨끗한 공간!
제품의 실사 이미지컷과 자연친화적인 브랜드 아이덴티티를 전달할 수 있는 그래픽 요소를 병합 활용함으로서 자유롭고 유연적인 깨끗한 브랜드 룩엔필을 전달해 줄 수 있는 웹사이트 디자인을 진행하였습니다.

사이트 전반적으로 그린톤의 컬러와 잎사귀를 사용하여 에코띠끄만의 브랜드 아이덴티티를 살리며 친환경의 분위기를 연출하도록 하였으며 메인부터 제품소개쪽까지 자유로운 공간의 느낌을 살리도록 하였습니다.
시원한 타이포의 사용과 사이트 전반적으로 가독성에 중점을 두었으며 디자인 요소에서 친환경 테마를 놓치지 않도록 하였습니다.

개발 방향

에코띠끄 사이트의 기능적인 부분은 워드프레스의 기본기능을 최대한 활용하여 구축했지만 디자인을 표현하기 위한 퍼블리싱팀의 노력이 더욱 돋보이는 사이트 이기도 합니다.
배경과 콘텐트 영역의 자연스러운 구분 처리, 메인 비주얼을 대신한 제품이 롤링되는 스크립트, 처음 접속자에게 에코띠끄의 컨셉을 알려줄 인트로 페이지 등 워드프레스 테마로의 가능성을 확인해 볼 수 있는 사이트였습니다.

주요 기능

1) SEO 최적화 : Google, bing 등 검색 엔진에 웹 사이트 및 포스트 내용을 검색 엔진에 잘 노출 될 수 있도록 SEO 기능을 제공합니다.
2) 소셜 미디어 연계 : 공유하고 싶은 포스트와 페이지를 바로 가져갈 수 있게 트위터, 페이스북 등 다양한 소셜 미디어를 제공하며 국내 소셜미디어 서비스인 다음의 요즘, 네이버의 미투데이도 공유 가능하도록 개발 하였습니다.
3) 소셜 댓글 활용한 이벤트 : 소셜댓글 서비스를 접목하여 특별한 로그인 없이 자신의 SNS 계정으로 댓글을 남기고 더불어 각 SNS로 포스팅하는 구조로 구축하였습니다.

크로스 브라우저에서 제대로 사이트가 보여져야 한다면 지금 설치해 볼 수 있는 괜찮은 툴들이 있습니다.

Phonegap

모바일앱을 손쉽게 제작해주는 오픈소스 플랫폼 Phonegap을 소개합니다.

CSS3 @font-face Design Guide

웹에서 제공하는 오픈 타입 폰트(Open Type Font)를 사용하고 싶으신가요? CSS3에서 제공하는 font-face 속성 디자인 가이드과 함께 원하는 폰트로 귀사의 사이트를 새롭게 단장해 보십시오.

25 Beautiful CSS Web Designs for Inspiration

플래시를 사용하지 않고도 다양한 인터렉션과 우수한 비주얼을 표현한 25개의 CSS기반 웹사이트를 소개합니다.

The Expressive Web Beta

Adobe사에서 만든 감각적인 HTML5&CSS3 데모 사이트를 소개합니다. 각 요소의 설명과 재밌는 사용 예를 보여주며 지원 브라우저 안내 및 참조 사이트 링크도 제공합니다.

사이트 · 기획 방향

널리 알려라! O2Jam!
기존 게임사이트들은 게임소개 및 사용자 커뮤니티에 치중하여 짜여진 틀 안에서만 정보를 공유하고 소급했습니다.
그리고 국내 사용자만 고려한 환경과 기능만을 생각하여 무거운 플레쉬,또는 불필요한 Active X 설치 등으로 시대에 뒤떨어 지는 사이트를 제공해 왔습니다.
“국내 게임 런칭하는데 국내 사용자만 고려하면 되지 않아?” 라는 안일한 생각은 이제 버려야 할 때입니다.

WordPress로 제작된 O2jam Analog는 보다 진보된 사이트로 표준화 코딩을 통해 모든 브라우저를 지원하며 모바일 게임인 만큼 모바일환경에서도 잘 보이도록 제작하였으며 국내에서 서비스 하는 인기 SNS서비스들을 연계하여 보다 양질의 콘텐트를 확산 할 수 있으며 국내 정서에 맞는 커뮤니티 게시판을 개발, WordPress에 적용 시킨 좋은 사례입니다.

디자인 방향

튀어나와라! O2Jam!
O2Jam의 직접적인 게임 요소인 블럭, 섬광, 음표, 음원 배경 캐릭터들이 모바일 디바이스에서 역동적으로 튀어나오는 느낌을 표현함으로서, 리듬게임이 가지고 있는 어디로 튈지 모르는 긴장감의 재미와 안정적인 정보 가독성에 초점을 둔 스타일로 디자인 되었습니다.

사이트 전체적으로 사선의 그리드를 사용하여 긴장감과 재미를 주도록 하였으며 각 카테고리마다 특징을 살린 튀어나올듯 한 오브제들을 배치하여 O2Jam 만의 비주얼 아이덴티티를 살리도록 하였습니다. 각 콘텐트는 확장성과 가독성에 중점을 두어 디자인, 제작하였습니다.

개발 방향

O2jam 프로젝트를 처음 시작하고 가장 큰 걱정은 국내 정서에 맞는 게시판을 개발하는 것이였습니다. 기존 게임사이트들의 큰 틀을 벗어나지 않는 선에서 기능들을 구현해야 했기에 WordPress라는 특성을 보존하며 작업하기는 결코 쉽지만은 않았습니다. 단순 게시판을 붙이는 작업이 아닌 관리자에서 게시판 생성, 유형관리 등 다양한 기능을 제공해 주고자 많은 노력을 했습니다.

Meta Board 의 장점
- 관리자에서 게시판 생성 후 Post에 Short-code 로 추가하여 보다 간편하게 사용할 수 있음.
- 비밀글쓰기, 비회원 글쓰기, 댓글 등 국내 게시판 기능에 뒤떨어지지 않도록 구현.

주요 기능

1) SEO 최적화 : Google, bing 등 검색 엔진에 웹 사이트 및 포스트 내용을 검색 엔진에 잘 노출 될 수 있도록 SEO 기능을 제공합니다.
2) Meta Board : 다양한 기능을 내포한 일명 :한국형 게시판”을 게발하여 제공합니다.
3) 음원 미리듣기 : Side Bar에 위치한 음원 미리듣기 서비스는 리듬액션 게임의 빠질수 없는 요소를 고객에게 충족해주는 좋은 사례입니다.
4) 소셜 미디어 연계 : 공유하고 싶은 포스트와 페이지를 바로 가져갈 수 있게 트위터, 페이스북 등 다양한 소셜 미디어를 제공하며 국내 소셜미디어 서비스인 다음의 요즘, 네이버의 미투데이도 공유 가능하도록 개발 하였습니다.
5) 소셜 댓글 활용한 이벤트 : 소셜댓글 서비스를 접목하여 특별한 로그인 없이 자신의 SNS 계정으로 댓글을 남기고 더불어 각 SNS로 포스팅하는 구조로 구축하였습니다.