본문 바로가기

UX 디자인

아이콘디자인 기초 파악하기 본 포스트는 18년 12월 8일 대전디자이너스 주간 디자인스터디에서 공유된 자료를 기반으로 작성되었습니다. 아이콘디자인 개요 아이콘디자인이 무엇인지 생각하는데 앞서 아이콘이 무엇인가에 대한 생각이 우선해야 할 것으로 보입니다. 기본적으로 아이콘은 비언어적 커뮤니케이션을 위한 기호 체계의 형식이라고 볼 수 있습니다. 기호의 역사는 인류의 역사와 궤를 같이 한다고 볼 수 있을 것 같습니다. 쉽게 말해 픽토그램 등의 용어로 통용되는 비언어적 기호를 말한다고 볼 수 있습니다. 최근 들어 유난히 아이콘에 대한 관심도가 높아진 이유는 무엇일까요? 여러가지 요인이 있을 수 있지만, 2007년을 기점으로 시작된 모바일 혁명은, 인간 삶의 디지털화를 가속화하였습니다. 더 많은 디스플레이를 더 많은 용도로 쓰게 되면서 자..
DPI 스터디 (V1) V1 (190411) DPI 스터디 모니터 해상도, 인치 기반 DPI 계산 DPI계산 웹사이트(1): https://www.sven.de/dpi DPI계산 웹사이트(2): https://www.pixelcalculator.com (기능 제한적, 인쇄 쪽 내용 포함) DPI계산 웹사이트(3): https://www.pxcalc.com DPI계산법 설명 문서: http://nm3.kr/old/46 모니터 DPI감지 및 측정 웹사이트: https://www.infobyip.com/detectmonitordpi.php 픽셀 픽셀 정의: https://namu.wiki/w/픽셀 픽셀 크기 계산기: https://www.pixelto.net/px-to-cm-converter 픽셀은 절대적 크기를 갖지 않고, 그 '..
스케치에서 단축키 변경하기 스케치는 묘하게 일반적인 그래픽 프로그램의 인터페이스와 다른 단축키 구성을 가지고 있습니다. 그게 참 묘하게 달라서, 다른 프로그램에서 넘어 온 작업자들의 경우 단축키를 커스텀해야 하는 상황에 놓일 수가 있습니다. 다음은 스케치에서 단축키를 변경하는 방법에 대해 소개하고, 변경하면 좋은(조금 더 유니버셜한 그래픽프로그램 단축키 인터페이스에 근접하는) 단축키들을 소개하고자 합니다. 스케치 단축키 변경하기 일단 스케치 앱 내에서는 단축키 변경이 불가합니다. 시스템에서 설정을 해 주어야 하는데 이를 위해 맥의 시스템 환경설정을 실행해야 합니다. 환경설정에서 키보드 항목을 실행해야 합니다. 다음으로 스케치를 실행해서, 단축키를 맵핑하고 싶은 커맨드 이름을 확인합니다. 저는 지금 Fit to 100% 단축키인 A..
일러스트레이터 compound path & compound shape, path & shape 비교 Compound Shape과 Compound Path Compound Path와 Compound Shape 모두 원래 Shape을 Editable하게 유지하면서 조합을 통한 새로운 조형을 이룰 때 사용. Compound Shape는 Unite, Minus, Interact, Exclude 등 다양한 조합 가능하며 레이어 상으로 하위 개체를 생성함. Compound Path는 Exclude 조합만 가능하며 레이어 상으로 하나의 개체로 처리됨. Compound Path와 Shape 모두 Release하여 조합 이전 조형들을 복원하는 것이 가능하나 Shape이 아닌 Path 형태로 복원됨. Compound Path가 더 일반적인 Vector 그래픽 형태이나 기능성에 제약이 있음. Compound Shape은 ..
모바일용 이메일 디자인을 할 때에 주의해야할 점 5가지 *본 포스트는 "SITE-POINT'에 게재된 " CHRIS COYIER"가 쓴 "5 Golden Rules For Mobile Email Design"이라는 포스트를 국문으로 번역하여 더 많은 사람들에게 정보를 알리고자 하는 목적으로 저작된 포스트임을 밝힙니다. 모바일용 이메일 디자인은 단순히 작은 크기를 고려하여 디자인하는 것이 아니라, 사람들이 모바일웹을 사용하는 다양한 방식들을 고려해서 진행되어야 합니다. 모바일용 이메일 디자인에 있어서 필요한 요소들을 알아 보겠습니다. 1. 이메일은 최대한 단순하게복잡성은 모든 것을 망칩니다. 특별히 이메일에서는 더욱 그렇습니다. 작은 스크린 내에서 깨지기 쉬운 복잡한 구조는 언제든 피하도록 합니다. 또한 모든 모바일 스크린은 '미디어 쿼리(CSS)'를 지원하지..
큰 이미지를 여러 장으로 자동으로 나누어서 출력하는 법 포스터 및 현수막 등 사이즈가 큰 작업물에 대한 인쇄 작업을 진행할 때는 실제 크기의 작업 결과를 확인하기가 힘들 때가 있습니다. 그런 경우 일반적인 작업 환경에서 할 수 있는 방법으로 A4나 A3 사이즈의 용지로 분할인쇄하는 것이 있습니다. 분할인쇄의 경우, 이미지를 수동으로 분할하는 과정이 매우 귀찮은 작업이 될 수 있는데, Adobe Acrobat(또는 Adobe Acrobat Reader)를 통해서 이 작업이 쉽게 가능합니다. 일반적인 작업 포맷인 PSD, AI, TIFF 등의 이미지 원본 파일을 PDF 포맷으로 EXPORTING합니다. 그 다음에는 PDF파일을 열은 후, 위 이미지에서 보이는 것처럼 인쇄 버튼을 누르면 뜨는 인쇄 다이얼로그에서 POSTER 인쇄 방식을 선택하면 자동으로 선택된 용..
ico 파일 포토샵에서 열기, ico 패키지 파일 만들기, ico 편집 프로그램 소개, ico 비트 수 설정하기 파비콘이나 윈도우 프로그램용 아이콘을 만들 때는 ICO 포맷의 파일 제작이 필요합니다. ICO 포맷의 경우 전용 에디팅 프로그램이 딱히 없는 실정인데요. 이를 포토샵에서 편집하고, 또 ICO파일의 특성인 패키징 파일(하나의 파일에 여러 개의 ICO 파일이 있는 경우)를 위해서는 별도의 프로그램 활용이 필요합니다. 포토샵으로 ICO파일 열기1. ICO FORMAT(포토샵용 ico 파일 플러그인)을 텔레그래픽스 홈페이지에서 다운 받습니다.* 다운로드 URL : http://www.telegraphics.com.au/sw/product/ICOFormat * 32비트, 64비트 및 7 이상용을 잘 구분하여 자신에게 맞는 운영체제의 파일을 다운 받도록 합니다. 2. 포토샵이 설치된 디렉토리의 plug-ins 폴더..
웹디자인을 쉽게 해줄 7가지 폰트아이콘 소개 *본 포스트는 "SITE-POINT'에 게재된 " CHRIS COYIER"가 쓴 "5 Golden Rules For Mobile Email Design"이라는 포스트를 국문으로 번역하여 더 많은 사람들에게 정보를 알리고자 하는 목적으로 저작된 포스트임을 밝힙니다.*본 포스트는 2012년에 기재된 포스트로서 현 시점에서 내용과 다소 차이가 있을 수 있으나, 현재에도 유용한 정보를 담고 있다고 판단하여 번역하는 내용이니 이에 참고 바랍니다.2012년 초 TNW에서는 폰트아이콘(icon font)의 사용세가 증가함을 보고 드린 바 있습니다. 폰트아이콘에 대해서 아직 잘 모르시는 분들을 위해 설명 드리자면, 과거 딩뱃폰트의 실용적인 형태의 업그레이드 버전이라고 보시면 될 것 같습니다. Pictonic에 설명에 ..
외주/과외 문의