본문 바로가기

Technology

 (267)
웹 그리드시스템을 위한 가이드 흰 종이에 줄을 맞춰 글자를 쓰기란 생각보다 힘이 듭니다. 그렇지만 종이에 일정한 간격의 수평선이 그어져 있다면 보다 쉽고 깔끔하게 글을 쓸 수 있습니다. 우리가 흔히 사용하는 유선노트와 같이, 그리드(grid)는 더 나은 문서를 만들 수 있게 해줍니다. 그리드 시스템을 사용하면 정보에 질서와 구조를 부여할 수 있습니다. 의미 있고 논리적으로 콘텐츠를 구성할 수 있도록 도와줍니다. 편집 디자인에서 주로 다루던 그리드를 이제는 웹과 모바일 앱에서도 당연하게 사용합니다. 그리드 시스템은 어떻게 만들어야 할까요? 영국의 디자이너 Tom Newton이 말하는 그리드 시스템 가이드를 소개합니다. 1. 고려 사항그리드를 고려할 때는 첫 번째로 문제 해결, 두 번째로 미학에 초점을 맞추어야 합니다. 그리드는 요소들의..
UI의 9가지 상태 들어가며 UI디자인은 기존의 정적인 디자인과는 다르게 동적으로 변화하는 디자인입니다. 하나의 컴포넌트(화면에 배치되는 U조각)는 상태나 상황에 따라 여러 가지 형태로 변화합니다. 그리고 그 변화에 따라 다른 데이터를 표현해야 하고, 그 내용에 따라 양식(스타일)도 달라져야 합니다. 그래서 UI디자인은 내가 미쳐 생각하지 못한 상황이 있어 더욱 까다롭고 조심스러운 작업입니다. Vince Speelman이 정리한 UI컴포넌트의 9가지 상태에 대해서 알아보겠습니다. 최근 UI 디자인팀은 화면을 구성하기 전에 컴포넌트(UI조각)을 먼저 디자인합니다. 인터페이스는 그저 잘 구성된 컴포넌트의 모임이라는 것이죠. 이는 사용자를 “불행의 길”로 빠져들게 합니다. 기술 시스템이 아닌 페이지를 만드는 것이기에, 잘못된 디..
웹사이트 디자인에 대한 이해 높이기 웹사이트 디자인을 처음 계획해보거나 리뉴얼을 생각하는 분들께 도움이 되는 글을 모았습니다. 웹디자인의 역사를 포함해 홈페이지 방문자 수를 늘리는 7가지 팁까지, 웹디자인에 대한 다양한 글을 읽고 웹디자인에 대한 이해를 높여보세요. 1. 짤방으로 이해하는 웹 디자인의 역사 웹디자인의 역사는 어떻게 발전해왔을까요? 웹의 암흑기부터 반응형 디자인까지 거쳐온 웹디자인의 발전을 간단한 짤방으로 이해할 수 있습니다. 짤방으로 이해하는 웹 디자인의 역사 (→글 읽기) 2. 움짤로 이해하는 반응형 웹디자인의 9가지 요소 반응형 웹디자인이라는 말 많이 들어보셨을 텐데요. 다양한 디스플레이 환경에 대응할 수 있는 반응형 웹디자인에 대해 정확히 이해할 수 있도록 돕는 글입니다. 아직도 반응형 웹디자인의 개념이 모호하다면 꼭..
작업에 도움을 줄 사소하지만 유용한 포토샵 팁 포토샵은 디자이너뿐만 아니라 많은 사람이 사용하는 adobe사의 프로그램입니다. 그러나 포토샵을 사용하다 보면 저장을 하지 않으면 작업 파일을 날리는 일, 일일이 수작업을 해야 하는 일 등 좀 더 작업을 쉽고 빠르게 안전하게 할 수 없을까? 라는 생각이 듭니다. 특히나 포토샵을 사용하는 사람들에게 수시로 ctrl+s (저장 단축키)를 눌러주는 것은 정말 중요한 일입니다. 포토샵을 조금 더 유용하고 간편하게 쓸 수 있는 자동저장 방법과 포토샵 플러그인을 소개해드리겠습니다. 포토샵 CS6 버전부터는 자동저장(Auto Save) 기능이 생겼습니다. 포토샵을 작업해보신 분들이라면 누구나 공감하는 저장의 중요성. 이에 관해 조금이나마 여러분을 걱정을 덜어줄 기능이 자동저장입니다. 이 자동저장 기능은 사용자가 설정..
디자이너와 디자인회사를 위한 업무 필수앱 5개 슬로워크에서 디자인 업무에 활용하고 있는 모바일앱을 소개합니다. 당장 설치하고 업무에 사용해보세요! (게다가 모두 무료입니다.) 1. CMYK 컬러로 된 pdf를 RGB로 보고 싶다면? Adobe Acrobat Reader 인쇄물 편집을 하다 보면 CMYK로 작업한 파일을 그대로 pdf로 저장해서 메일로 보내는 경우가 있습니다. 실제 인쇄용이라면 당연한 일이지만, 검토용이라면 문제가 있습니다. 보통의 앱에서는 CMYK 컬러를 그대로 보여주기 때문에 아래와 같이 보입니다. 그렇지만 Adobe Acrobat Reader를 사용하면 자동으로 RGB로 변환해서 보여주기 때문에 문제없이 보입니다.가격: 무료다운로드: 아이폰, 안드로이드 2. 이메일의 첨부파일을 모아서 보고 싶다면? Outlook 디자인 업무를 하..
데이터를 잘 써먹을 수 있는 구체적인 방법 한동안 분야를 막론하고 '데이터' 혹은 '빅데이터'의 열풍이 몰아친 적이 있었습니다. 그 열기는 한 김 식었고 그 뒤에 감추어져 있던 거품이 모습을 드러내기도 하였지만, 데이터는 여전히 어떤 '가치'를 창출하는 데 있어 중요한 수단으로 여겨지고 있습니다. 치열한 경쟁 속에서 살아남기 위해서 데이터의 사용은 더욱 필요할 것이며, 기술의 발전은 그러한 적용을 수월하게 만들 것입니다. 과연 데이터 시대에서 우리는 가치 있는 데이터를 잘 사용하고 있을까요? 많은 데이터를 가지고 있는 것 또는 그러한 데이터를 사용하는 행위 자체에 어떤 의미를 부여하며, 데이터 사용의 본질을 잊고 있는 것은 아닐지 고민해 보아야 합니다. 효율적인 의사 결정을 지원하는 정보라는 관점에서 데이터를 잘 활용하기 위해서는 어떻게 해야 하..
웹디자인의 완성도를 올려 줄 8가지 체크리스트 조그마한 디테일이 웹사이트의 완성도를 좌우합니다. 이 글은 웹디자인의 디테일을 떨어트리는 사소한 실수를 다루려고 합니다. 아직 디자인 경험이 충분하지 않다면, 웹사이트의 완성도를 높여줄 8가지 체크리스트를 배워보세요*아래 예시들은 원글 작성자에게 피드백을 요청한 웹 사이트입니다. 1. 템플릿의 부적절한 활용템플릿은 여러분의 작업시간을 단축해주지만, 디자인의 통일성이 떨어질 수도 있습니다.템플릿을 사용하면서 생기는 공통적인 문제는 여러분이 준비한 로고와 통일성이 떨어진다는 점입니다. 로고의 컬러가 웹사이트 어디에도 찾을 수 없거나, 사이즈가 안 맞아 엉성해 보이는 경우가 많습니다. 템플릿을 사용했을 때는 반드시 디자이너의 재가공이 필요합니다. 템플릿이 깔끔하더라도 템플릿의 기본 스타일을 쓰지 않길 권합니다..
좋은 인터랙션 디자인을 위한 5가지 심리학 비밀 인간적인 요소를 포함하는 디자인은 매일 더욱 중요해지고 있습니다. 웹사이트와 사용자 경험 디자인은 미학에서부터 인터랙션, 모션(인식과 실제), 감정적 연결까지 사실적이어야 합니다. 그러나 디자이너들이 가장 자주 직면하는 문제는, 사용자를 `실제 사람들`처럼 생각하지 않는다는 것입니다. 인간적인 디자인은 사용자에게 물리적, 감정적으로 이어질 수 있는 매력적인 경험을 만들어줍니다. 인간적인 디자인을 위해서는 무엇을 고려해야 할까요? The Next Web(TNW)에 소개된 UXPin의 사례를 소개합니다. 1. ‘사람이 가장 먼저’모든 프로젝트의 디자인과 기획 단계에 이 말을 기억하세요. 의도적으로 행동하고 인터랙션하고, 디자인하세요. 무엇보다 사용자에게 공감하는 것이 중요합니다. 사진 제공: 리복 사람을 위..

티스토리툴바