WEB&MOBILE + UX/UI PLAN&DESIGN, kimdirector

웹디자인 75

'본질의 웹 디자인(Intrinsic Web Design)' 시대가 온다

CSS 르네상스가 오고 있습니다. 현재 글로벌 웹 디자인계의 최대 이슈 중 하나를 꼽으라면 '본질의 웹 디자인Intrinsic Web Design'이 아닐까 합니다. '본질의 웹 디자인'은 지난 4월 언 이벤트 어파트(An Event Apart) 콘퍼런스에서 젠 시몬스가 정의하고 창안해 발표한 새로운 웹 디자인 시대의 도래를 알리는 내용을 말합니다. 웹 액츄얼리 매거진팀에서는 '반응형 웹 디자인' 소개 이후 웹 디자인계에 새로운 큰 물결의 웹 트렌드가 올 것이라 판단하고 이와 관련된 기사들을 번역해 올릴 계획입니다. '본질의 웹 디자인'이 무엇인지 의미를 알아보고 앞으로 CSS 레이아웃을 통해 어떻게 웹 레이아웃을 만드는 기준이 바뀌게 되며 '새로운' 웹 디자인 시대가 온다는 것인지 예상해보면 좋겠습니다..

움짤로 이해하는 반응형 웹디자인의 9가지 요소

반응형 웹디자인이 무엇일까요? 얘기는 많이 들었지만 잘 모르고 그냥 넘겼을지도 모릅니다. 하지만 이 분야에 종사하시는 분이라면 이 개념을 확실히 알고 넘어갈 필요가 있습니다. 디자이너 산디스 씨(Sandijs Ruluks)는 블로그에 반응형 웹디자인을 gif로 쉽게 설명했습니다. 그는 프린트 기반의 디자인을 하다가 웹디자인을 시작해서 좀 더 일반적인 관점에서 잘 설명했는데요. 반응형 웹디자인은 다양한 스크린 크기에 대응할 수 있는 훌륭한 해결책입니다. 하지만 이것을 단순히 프린트 기반의 디자인과 같은 개념으로 이해한다면 당연히 어렵습니다. 정해진 페이지 크기가 없으며, 인치(inches)나 밀리미터(mm)의 단위를 쓰지 않습니다. 그렇다고 픽셀만으로 웹과 모바일 디자인한다는 것도 구시대 발상이 되었는데요..

웹디자인의 성공 전략

인터넷시장은 아주 빠르게 형성되고 소멸하는 특성이 있다. 이러한 특성은사용자 마음의 변화, 즉 사이트에 대한 기호가 쉽게 바뀌기 때문이다. 이것은 사용자가 특정한 목표에 따른 사이트 선별에 있어 매우 다양한 사이트를 검색해야 하는 어려움이 있기에 사용자의 부담감이 최소화된 방향으로 컨텐츠를 개발 해야 함을 말하는 것이다. 초반기의 사이트는 화려한 시각적 효과로서 강한 인상으로 어필하여 다시금 사이트를 찾게 했지만, 보다 빠른 시간에 최적의 정보를 찾아야 하는 시점에서는 우선적으로 빨리 뜨고 내용을 쉽게 찾을 수 있는 사이트가 선택되어 진다. 이러한 사용자의 기호에 부합되면서 성장해온 사이트들은 사용자의 눈 높이를 생각하면서 조금씩 사이트를 변모시킴으로써 지속적으로 고정 사용자를 유치할 수 있는 것을 쉽게..

웹디자인시 중요한 체크포인트

많은 툴을 다룰 줄 아는 것은 기본일 뿐이다. 면접시 제출한 이력서를 보면, 자신이 다룰 줄 아는 툴에 대해서만 3-4줄 정도 빽빽하게 나열한 경우를 볼 수 있습니다. 물론 많은 툴을 익혔다는 것은 자신에게 플러스 요인이 되는 것은 부인할 수 없죠. 하지만, 그것은 웹디자이너의 기본에 지나지 않는다는 것을 명심하세요. 다시 말해 툴이라는 것은 기능적인 것이지 테크닉이 아니라는 것이죠. 사용자 환경을 고려하라 앞서도 말했지만, 자신만 만족하는 디자인은 얼마안가 외면 당하기 쉽습니다. 누구로부터냐구요? 바로 사용자지요. 홈페이지는 자기만 보려고 만드는게 아니라, 여러 사람이 볼 수 있도록 만드는 것이라는 것은 기본적으로 아실거에요. 그래서 홍보를 하는 거죠~ 내가 모니터 환경을 이렇게 쓴다고 해서 다른 사람..

단순한 형태는 복잡한 형태보다 더 쉽게 인식된다.

사람의 시지각은 복잡한 것을 단순하게 지각하려는 경향이 있다. 그래서 단순한 형태는 복잡한 형태보다 더 쉽게 인식되며, 이는 디자인에 대한 선호도에도 영향을 끼친다고 볼 수 있다. 애초부터 복잡하지 않게 구성하는 것이 바람직한데, 만약 이것이 불가피하다면 복잡한 것을 단순하게 보이려는 노력이 강구되어야 한다. 그럼에도 단순하게 구성할 수 있는 것들을 굳이 복잡하게 보이려는 시도를 자주 볼 수 있다. 태스크 수행에 대한 동기가 부족한 사람들에게 복잡한 구조는 방해물이나 다름없다. 따라서 사람들이 더 쉽고 빠르게 인식할 수 있도록 디자인해야 한다. 사용자들이 웹사이트나 소프트웨어를 이용하는 이유는 자신에게 발생한 문제를 해결하기 위함이다. 즉, 아무 이유없이 이용하진 않는다. 따라서 문제 해결(problem..

인덱스(Index)로써의 초기 화면

정보 탐색의 효율성은 정보량과 정보 제공 방식에 의해 달라진다. 나열된 정보가 많아지면 원하는 정보를 찾기가 더욱 어려워진다. 물론 어느 정도까지는 큰 어려움 없이 처리할 수 있다. 그러나 정보량이 많아지면 어느 순간부터 인지적 노력이 급격히 증가할 것이다. 이와 함께 UI도 중요한 이슈이다. 포털이나 전자상거래 사이트는 방대한 정보를 담고 있다.그리고 대부분의 정보 탐색은 초기 화면에서부터 출발한다. 이것은 초기 화면이 사용자와 정보를 연결시켜주는 인덱스(index)로써의 역할을 수행하고 있다는 것을 의미한다. 책의 목차와 그 역할이 비슷하다. 다만 문자적 속성 외에 형태적 속성까지도 포함하고 있다는 것이 다를 뿐이다. 인덱스로써의 초기 화면은 문자 외에도 형태(shape), 색상(color), 위치(..

[2004.12] 보다 나은 웹사이트 디자인 비법 100가지

세계의 Top 10 뉴미디어 디자인 회사가 공개하는 “잘.나.가.는.” 사이트 만들기 비법 100가지 레이아웃 단도직입적으로 말해 레이아웃은 웹사이트 디자인의 핵심이다. 레이아웃은 사용자의 지각 대상으로서 웹사이트의 외관과 느낌을 결정하기 때문이다. 하지만 사이트의 레이아웃을 정한다는 것은 스케치를 하거나 제작 도구에서 버튼이나 그래픽 등을 끌어다놓는 것 정도로 끝나는 일이 아니다. 레이아웃은 기획과 팀워크, 창의력을 필요로 하는 창조적인 작업 과정인 것이다. 뉴 미디어 대행사인 레이저피시의 런던 지사에 근무하는 수석 디자이너 리차드 월렛(Richard Wallett)이 효율적인 사이트 레이아웃을 위해 다음 열 가지 팁을 내놓았다. 1. 요점을 명확히 정리한 간단한 문서를 만든다. 자신이 이해할 수 있고..

좋은 웹 사이트 디자인을 위한 가이드

웹 서핑을 하다 보면 우연히 훌륭하고 멋진 웹 사이트를 발견하고 자기도 모르게 빠져들게 되는 경험을 다들 해보셨으리라 생각한다. 반대로 정말 너무하다 싶을 정도로 자기중심적이며 사용자의 편의성 따윈 전혀 고려하지 않고 제작된 사이트도 종종 접하셨으리라 예상된다. 그런 사이트들은 사이트의 구축 목적도 잊고 오로지 웹 디자이너 혹은 개발자가 웹 상에서 할 수 있는 대단한 기술 혹은 기법들에 대한 자기과시를 표현하는 경우라고 볼 수 밖에 없다. 이런 사이트들은 사용자들과 구축한 개발자들에게까지 아무런 도움을 줄 수가 없다. 요즘 우리는 굉장히 많은 정보와 디자인을 웹 상에서 접할 수 있다. 너무도 다양하고 방대한 양의 컨텐트와 디자인을 제공하고 있는 수많은 사이트들을 어떻게 읽고, 보고, 판단하며 평가할 수 ..

웹사이트에서의 컬러 디자인

"감성은 개인적이지만 이해는 일반적이다“ 라는 말이 있다. 이말을 컬러 디자인에 빗대어 풀어보자면 색을 사용하는 방식은 개인적이지만 색이 사람에게 미치는 영향은 객관적으로 이해할 수 있다는 뜻이 된다. 색을 효과적으로 사용하기 위해서는 색상이 주는 보편적인 이미지와 상징성 등 색에 대한 일반인의 객관적인 의견을 참고할 필요가 있다는 말이다. 색은 매우 중요한 정보전달 수단이며 사람의 심리에도 영향을 미친다. 심리학에서는 선호하는 색상에 따라서 심리상태를 진단하기도 하며, 심리치료를 위해서 색상을 활용하기도 한다. 웹사이트에서도 마찬가지다. 그렇기 때문에 색에 대해서 잘 이해하지 못하거나 색이 갖는 영향력을 제대로 사용하지 못한다면 오히려 사이트에 악영향을 끼칠 수도 있다. 조사에 의하면 사용자가 웹사이트..

당신의 웹사이트는 감성적인가?

오늘은 웹사이트에서 감성적 요소를 따져보자. 과연 당신이 만드는 웹사이트에서는 얼마나 감성적인 요소가 고려되고 있는가? 최상위 웹사이트에서는 감성적인 서비스가 웹사이트의 질적 수준을 조금씩 높여주는데 기여하고 있다. 웹사이트에서 감성적 접근은 오프라인에서 익숙한 정서나 행동을 반영하는 것에서 출발한다. 온라인 공간이 냉정하고 차가운 공간인 것 같지만, 그 속에서 따뜻하고 인간적인 면을 부각시키고 감성적인 측면을 반영함으로써 사용자들에게 친숙함으로 다가갈 수 있다. 상위 웹사이트에서는 기능적 측면에서도 사용자들에게 만족도가 높고, 아울러 감성적 측면에 대해서도 사용자들에게 친숙하게 다가갈 수 있도록 세부적 기능과 서비스, 레이블링과 화면디자인 등에서 고려하고 있다고 할 수 있다. 어쩌면 인간적이고 감성적인..

웹디자이너가 되기 위한 웹디자인 10계명

디자인과 코딩만 잘한다고 해서 훌륭한 웹디자이너나 웹퍼블리셔, 웹프로그래머가 아닐 것 입니다. 웹디자이너로 일을 하기 위해서는 홈페이지제작 의뢰를 하는 클라이언트가 있어야 합니다. 클라이언트와의 유기적인 관계 또한 웹디자이너로써의 덕목 이죠. 이외에 웹디자이너로써 명심해야 할 웹디자인에 대한 10계명을 알아보도록 하겠습니다. 1. 크리에이티브로 꽉 차 있다. 디자이너의 기본은 크리에이티브, 혹은 감각이다. 긴 설명이 필요없이 크리에이티브는 열심히 공부하고, 흉내내고, 고민하고 갈고 닦아야 한다. 2. 크리에이티브를 설명하고 설득할 수 있어야 한다. "바로 이거야!" 작업하고 나서, "이건 좀... 이것보다는 이런 건 어때..." 라는 의견을 들었을 때 어째서 이 작업을 이렇게 했는지, 왜 이렇게 나와야 ..

'웹디자이너'라는 이름의 책임

최근 웹디자인 업계는 소문도 흉흉하고 실제로도 어려운 회사 재정에 허덕이는 곳들이 많아졌다. 얼마전에는 국내 최대 규모의 에이젠시라고 자랑하며 어떤 어려움이 닥쳐도 끄떡없을 것 같던 곳도 부도설이 나돌아 업계를 긴장시켰고 지금은 예전 규모의 3분의1 정도로 축소되었다 한다. 대규모 에이젠시들이 이러한 상황일 땐 규모가 작고 영세한 업체들의 어려움이란 두말 할 나위 없을 것 같다. 그러나 웹 에이젠시업계를 관심어린 눈으로 바라보는 한 사람으로서 업계의 재정 악화보다 안타까운 일은 인재들이 하나 둘씩 좀 더 편하고 쉬운(?) 일들을 찾아 떠나고 았다는 점이다. 웹상의 공간에 무형의 집을 짓고 일에는 단지 인력과 컴퓨터가 필요할 뿐이다. 그렇기에 얼마나 뛰어난 실력과 능력을 겸비한 인재들이 모여 프로젝트를 진..

[2004.06] 웹디자인을 잘 할려는 사람들에게 필수

웹디자인에 필요한 프로그램들을 잘 알아야 합니다 기본적으로 Photoshop, Illustrator, Dreamweaver, Flash등 웹디자인에 필요한 프로그램들을 잘 알아야 합니다. 아무리 디자인 능력이 뛰어나도 툴을 쓸 줄 모르면 자신의 디자인을 제대로 표현을 못하게 됩니다. 학원에서 배우는 것보다도 혼자 책 보면서 배우는 것이 좋다고 생각이 드네요. 요즘 배우기 쉽게 된 좋은 책들이 많이 나와 비싼 돈 들여서 학원에서 배우는 것 보다는 책을 사서 작업하면서 배우는 것이 훨씬 효과적일 것 입니다. 그냥 책을 읽어나가는 것이 아니라 직접 작업 해보면서 배우는 것이 잊어버리지도 않고 노하우가 생기게 되죠. 저도 혼자 책 보면서 배웠는데 학교 과제 하면서 프로젝트 하면서 몰랐던 것들 많이 배우게 되고 ..

[2004.04] 창조자의 마음으로 디자인을 하세요.

우리는 자주 우리나라 디자인은 외국의 디자인 보다 많이 떨어진다는 말을 듣습니다. 그리고 이 말은 "우리 디자이너들은 생각할 줄을 몰라!..." 라는 말로 이어지곤 합니다. 생각없는 디자인은 디자인이라고 할 수 없습니다. 그것은 다만 선긋기나 글짜넣기, 색넣기 정도로 얘기할수 있겠지요. 여러분들이 하는 디자인에는 반드시 생각이 들어가야하고, 만약 여러분들이 하는 작업에 생각이 들어가 있지 않다면 그것은 디자인이 아닌것입니다. 그냥 단순 '작업'이지... 그렇다면, 여러분들은 스스로 "나는 디자이너 다"라고 할수 있습니까? 얼마나 많은 생각이 여러분들의 작품에 들어가 있습니까? 스스로 "왜?"라는 질문을 던져보십니까? 대답은 "왜 않돼? why not?" 그리고 "그냥?"이라고 할수 있겠지만, 내 스스로 ..

투비소프트 Website Renuwal 개발 및 구축

Launching Day : 2008/06 Client : 투비소프트 Task : Hard Coding / Administrator IA Design, Coding Web 2.0 관련 소프트워에 개발 업체의 홈페이지 리뉴어 사이트 제작. 기존의 복잡한 사이트 구조를 심플하고, 활동적인 사이트로 탈바꿈하고 플래시를 잘 활용하여 특징적인 사이트로 거듭나게 했다. 섹션별로 칼라구성을 차별화하여 제품구성을 돋보이게 하고 브랜드 가치를 한단계 끌어올렸다고 할 수 있다.

Lemon Record CMS Tools 개발 및 구축

Launching Day : 2008/05 Client : Lemon Task : Interface Design / Hard Coding / Contents Architecture Design Lemon Record 텔레마케팅 관리 전용 솔루션 인터페이스 디자인 제작. 전체를 영문으로 작업을 진행하여, 마케팅의 촛점을 해외에 두고 실제 개발된 솔루션은 인도네시아에 납품된 솔루션이다. 따라서, 다양하고 큰 덩어리의 이미지 사용을 최대한 줄이고, CSS에서 디자인 스타일을 구성하여 작업을 진행하였다. 전체적인 칼라톤을 블루계열로 통일하여 편안함과 부드러운 화면구성을 했으며, 가독성을 높이고 직관적인 인터페이스 화면으로 접근이 용이하도록 하였으며, 텔레 마케팅의 필요한기능들을 함축적으로 표현하여 화면을 설계하..

Project/Solution 2018.11.20

잉글리쉬채널 홈페이지 리뉴얼 개발 및 구축

Launching Day : 2008/04 Client : 잉글리쉬채널 Task : Webplan / Interface Design / Hard Coding / Contents Architecture Design 1:1 영어회화 전문학원 - 잉글리쉬채널 홈페이지 리뉴얼 제작. 기존의 사이트와는 차별화를 많이 시도하여 사용자로 하여금 유익하고 즐겁게 홈페이지를 서핑할 수 있도록 했다. 기존의 어지럽게 널려있던 컨텐츠들을 보강하여 가독성을 높였다. 컨텐츠별로 칼라를 다르게 하여 정적인 이미지를 줄이고, 활동적인 사이트가 될 수 있도록 했다.

Onnuriad 쇼핑몰 개발 및 구축

제작일 : 2008/01 webplan / Interface Design / Hard Coding / Contents Architecture Design 현수막 제작 및 오프라인광고 전문 제작업체의 쇼핑몰 제작 클라이언트의 요구사항이 많았던 쇼핑몰. 원색의 깨끗한 칼라구성과 복잡한 레이아웃 구조를 가지고 있는화면구성으로 상당히 어려움이 많았던 쇼핑몰 제작이였다. 직관적인 인터페이스의 구조와 어려운 네비게이션 구조를 가지고 있지만, 사용자 편의를 의한 구조를 가지고 있는 것 만은 사실일 것이다. 사용자가 원하는 현스막의 스타일과 칼라, 폰트 등... 원하는 형태의 현수막을 제작 및 배달까지 가능하게 처리될 수 있게 프로그램화 하였다. 관적인 인터페이스를 통한 쇼핑몰의 기능성을 강조하였으며, 쇼핑몰이 담고 ..

원단나라 쇼핑몰 리뉴얼 개발 및 구축

제작일 : 2008.01webplan / Interface Design / Hard Coding / Contents Architecture Design 원단나라 쇼핑몰의 리뉴얼 제작. 시안작업의 느낌은 살리되 전반적인 레이아웃을 수정하고 칼라구성을 소프트계열의 칼라로 수정되었다.기존의 단순한 구조를 체계적인 구조변경을 통해 운영관리의 효율성을 높이고, 전체적인 이미지를 개선하여 깨끗하고, 심플함을 강조하였다. 직관적인 인터페이스를 통한 쇼핑몰의 기능성을 강조하였으며, 쇼핑몰이 담고 있는 다양한 컨텐츠들을 효과적으로 사용자들에게 전달하고 어필할 수 있도록 전반적인 구조를 수정하였다. 또한, 단편적인 정보전달이 아닌 쌍방향 정보공유를 위해서도 쇼핑몰의 기능들도 강화되고, 개선되었다.

원단나라 쇼핑몰 리뉴얼 시안작업

제작일 : 2008/01 원단나라 쇼핑몰의 리뉴얼 제작 기존의 단순한 구조를 체계적인 구조변경을 통해 운영관리의 효율성을 높이고, 전체적인 이미지를 개선하여 깨끗하고, 심플함을 강조하였다. 직관적인 인터페이스를 통한 쇼핑몰의 기능성을 강조하였으며, 쇼핑몰이 담고 있는다양한 컨텐츠들을 효과적으로 사용자들에게 전달하고 어필할 수 있도록 전반적인 구조를 수정하였다. 또한, 단편적인 정보전달이 아닌 쌍방향 정보공유를 위해서도 쇼핑몰의 기능들도 강화되고, 개선되었다.

시스레인 웹사이트 디자인 제작

제작일 : 2007/09Interface Design / Hard Coding / Contents Architecture Design 시스레인 홈페이지 신규 디자인제작. 통신기기 및 전자부품 개발 전문업체 홈페이지 디자인 제작.전체적인 컨셉을 깨끗한 느낌을 강조한 디자인으로 제작 직관적인 인터페이스를 통한 홈페이지의 기능성을 강조하여 제작하였으며, 홈페이지의 효과적으로 전달하기 위한 목적으로 제작되었으며, 모든 데이타는 관리자 툴에서 관리하기 위한 방식으로 개발된 홈페이지.

TWORLD 홈페이지 디자인 제작

제작일 : 2007/09Interface Design / Hard Coding / Contents Architecture Design 티월드 홈페이지 신규 디자인제작. 디지탈보드의 브랜드 수입 딜러 홈페이지.전체적인 컨셉을 깨끗한 느낌과 제품을 강조한 디자인으로 제작 다양한 제품군을 가지고 있으며, 다양한 제품의 정보들을 효과적으로 전달하기 위한 컨텐츠 중심으로 제작되었다. 많은 양의 정보들을 쉽게 효과적으로 접근할 수 있는 인터페이스 구성과 홈페이지의 전체 구성을 효과적이고 효율성에 맞춧어 전체 디자인 작업을 진행했다.

새싹유치원 홈페이지 시안제작

제작일 : 2006.11WebPlan, Interface Design, Hard Coding 밝은 칼라와 베이지칼라를 사용하였고, 구름과 하늘이 뒤로 있는 언덕에 유치원과 아이들이 있다는 컨셉을 활용하였다. 컨셉은 어렵지 않게 결정했지만 하늘과 구름을 컨셉에 맞는 이미지를 찾지 못하고 여러가지 하늘 이미지와 구름 이미지를 사용하여 합성을 해서 작업하였고, 캐릭터를 활용하여 깔끔하고 심플하게 제작되었다.