찐망고'S 퍼블리싱그리고디자인

안녕하세요 찐망고입니다. 오늘도 시작해 볼까요? 컴포넌트는 사용자와 상호작용하는 기본적인 형태로, 어떤 공간에서든지 기능을 수행할 수 있는 가장 작은 단위입니다. 컴포넌트의 가장 중요한 특성은 재사용성이며, 어떤 문맥에서든지 사용자에게 이해하기 쉽고 사용하기 편리해야 합니다. 이의 목적은 특정 영역에만 제한되지 않고 명확하게 정의되어야 하며, 색상, 텍스트, 아이콘 등을 시각적으로 조직화하여 사용자에게 제공되어야 합니다. Definition 컴포넌트는 사용자가 다른 요소와 쉽게 구별하고, 사용자의 행동에 적절하게 반응하며, 현재 상태에 대한 정보를 명확하게 전달하는 가장 작은 단위입니다. 컴포넌트는 다섯 가지 특성을 가지고 있습니다. Usage: 컴포넌트의 목적과 역할을 정의 Shape: 다른 요소와 구..

안녕하세요 찐망고입니다. 이번 포스팅도 제가 자주 보는 글을 번역해서 올려보도록 하겠습니다. 아이콘은 다른 언어보다 더 보편적으로 이해될 수 있는 시각적 언어로, 물체의 특성을 강조하는 기호로 표현됩니다. UI 아이콘, 픽토그램, 그리고 표지 등으로 나타내며, 작은 공간을 차지하면서 의미를 전달할 수 있어서 다양한 분야에서 사용되는데요 아이콘은 다른 요소들보다 쉽게 개성을 부여할 수 있고, 시각적 원리를 실험할 수 있기 때문에 많은 디자이너들에게 사랑받고 있습니다. 이 글에서는 아이콘의 특성과 UI 디자인에서 권장되는 아이콘 디자인 가이드를 요약하였습니다. Usage UI 디자인에서 아이콘은 주로 앱 아이콘과 시스템 아이콘으로 널리 사용됩니다. 앱 아이콘은 브랜드를 표현하기 위해 사용되며, 시스템 아이콘..

안녕하세요 찐망고입니다. 이번 포스팅은 제가 자주 보는 글을 번역해서 올려보도록 하겠습니다. 색상은 아주 특별한 시각적 언어로써, 주로 사용자가 화면에서 특정 동작을 취하거나 반드시 알아야 하는 중요한 정보를 강조하는 데 사용됩니다. 파란색꽃과 빨간색 꽃은 우리에게 다른 느낌을 전달합니다. 그래서 디자인에서 색상을 다룰 때는 주의가 필요한데요 색상은 디자인에 디테일을 더해주는 역할뿐만 아니라 정보를 전달하는데에도 큰 역할을 합니다. 교통 신호등에 녹색은 긍정적인 상태를, 노란색은 주의를, 빨간색은 금지를 의미하는것처럼요 색상은 마치 불과 같습니다. 올바르게 사용하면 원하는 결과를 얻을 수 있지만, 지나치게 사용하면 디자인을 손상시킬 수 있죠 특히 디지털 디자인에서는 사용자가 빠르게 우선순위에 따라 행동해..

안녕하세요 찐망고입니다. 하늘아래 같은 레드는 없다는 말이 있죠? 참 훌륭한 명언이에요..😁 제가 외주할 때 디자인과 전혀 상관없는 직군을 가진 친구에게 배경색 4가지를 보여줬단 말이죠 핑크베이지계열인데 제눈엔 4개가 모두 다른데 친구는 다 똑같은색을 보내놓고 고르라고 하면...이라는 말을 들은적이 있었어요 그래서 아 눈시력과 상관없이 색감을 보는 눈이 사람마다 다르구나 라는걸 느꼈죠 여러분의 눈은 어떨까요? 한번 확인해볼까요? 가끔 학생들이 너무 지겨워하거나 힘들어할때 해보는 테스트인데요.. 하면서 스트레스 더받는건 안비밀.. 첫번째 테스트는 다른 색깔 찾기인데요.. 처음에는 엄청 쉬운데 뒤로 갈수록 어 다 같은색 아냐 하는 느낌이 들거에요.. https://kr.vonvon.me/quiz/1093 [..

안녕하세요 찐망고입니다. 오늘도 출처가 있는 포스팅을 번역해보도록 하겠습니다. 타이포그래피는 다른 시각 언어보다 더 구체적이고 정확하게 정보를 전달하는 언어입니다. 아이콘이나 이미지는 물건이나 풍경을 표현하는 데 좋은 방법이 될 수 있지만, 텍스트는 행동이나 개념을 표현하는 데 더 효과적입니다. 동일한 문화 내에서는 의미를 확실히 전달하는 가장 많이 사용되는 시각적 요소입니다. 디지털 기기에서는 타이포그래피가 중요한 목적을 제공합니다 정보를 전달하고 행동을 유도하는 것입니다. 사용자의 행동이 비즈니스와 직접적으로 연결된 디지털 제품에서는 좋은 타이포그래피가 중요합니다. 이 글에서는 한글 타이포그래피의 디지털 제품에서의 사용을 예제와 함께 요약하였습니다. Font 글꼴은 일관된 규칙으로 디자인된 그룹으로,..

1. WWIT - What Was IT 국내의 UI/UX 모바일 패턴을 수집하는 사이트 입니다. UI 키트, 아이콘, 템플릿 등 다양한 디자인 리소스를 제공합니다. 모바일APP디자인이 한눈에 보이죠? 기획이나 디자인에 레퍼런스로 참고하기 좋은 사이트인 것 같아요 Lifeplus 한국의 UI/UX 모바일 패턴을 수집합니다. wwit.design 2. GDWEB GDWEB사이트는 국내 우수 웹디자인 선정 및 시상하기도 하는데 국내 디자인을 참고할 때 좋은 사이트 입니다. 우리나라 웹디자인 성향을 파악하기도 좋구여 이렇게 검색을 하면 해당 사이트의 디자인의 흐름도 찾아볼 수 있어요 유행이 한눈에 들어오죠 ㅎㅎ http://www.gdweb.co.kr www.gdweb.co.kr 3. DBCUT GDWEB과 비..

안녕하세요 찐망고입니다. 작업을 하다보면 고해상도 이미지가 필요할 때가 있는데요. 아무래도 저작권 때문에 무료이미지를 구하기는 쉽지 않죠 오늘은 제가 잘 사용하는 사이트들을 공개합니다. 1. Unsplash 엄청 유명한 사이트죠? 고해상도 이미지를 상업적으로도 이용가능 한.. 전부 무료는 아니고 저렇게 무료 다운로드 아이콘이 있는 이미지들만 클릭해서 다운받으면 됩니다. 다운로드시 저렇게 저작자 표시를 할 수 있는 모달창이 같이 뜹니다 https://unsplash.com/ko 아름다운 무료 이미지 및 사진 | Unsplash 어떤 프로젝트를 위해서든 다운로드 및 사용할 수 있는 아름다운 무료 이미지 및 사진입니다. 어떤 로열티 프리 또는 스톡 사진보다 좋습니다. unsplash.com 2. designe..

안녕하세요 찐망고입니다.오늘은 웹에서 많이 사용하는 용어들을 정리해서 업로드 해볼까 하는데요다 알고있지만 정리하는 개념으로 올려볼게요 1. 반응형&적응형 웹 - 반응형 웹접속하는 디스플레이 종류에 따라 화면의 크기가 알맞게 변하는 웹사이트반응형 웹은 접속하는 사이트 주소가 하나이다.- 적응형 웹 PC형태와 모바일형태를 나눠서 작업하는 적응형 웹 사이트접속하는 사이트 주소가 두 개이다. ex) www.naver.com, m.naver.com참고로 PC에서 모바일 사이트를 확인해볼 수 있는데1. 개발자도구(F12)를 연다2. 모바일 아이콘을 누른다.3. 새로고침을 해본다.  2. Favicon - 웹사이트에 방문 했을 때 브라우저 탭 좌측에 아이콘 - ico확장자: 구글에 ico변환사이트를 사용하면 쉽게 변..

안녕하세요 찐망고입니다. 키치하다 라는 단어 들어보셨나요?그럼 Y2K디자인은요?2023년 올해 웹디자인 트렌드 중 하나가 Y2K디자인이거든요..일단 키치하다라는 단어부터 알아볼까요? "키치하다" 일반적으로 어떤 대상이 과한 화려함이나 유행에 따른 특징을 가지고 있다는 의미를 뜻하는데요"과하네" 이게 펙트인거 같아요과장되고 유행을 따르는 화려함을 강조하며, 밝고 채도 높은 색상을 사용합니다.아무래도 그러다보니 누군가에겐 키치가 화려하고 재밌을 수 있겠지만,또 어떤 사람들에겐 키치가 너무 과장된 느낌이 들 수도 있겠죠? 안읽어도 되는 키치라는 용어의 유래더보기1. 독일어 "kitschen"과의 연결: 19세게 뮌헨에서 키치는 저급한 예술품이나 모조품을 가리키는 용어로 사용되었던..

폼(form)은 불만사항과 다양한 법적 탄원서를 작성하는 작업을 단순화하기 위해, 오랜 시간 동안 존재해왔다. 정보와 정보 처리의 발달에 따라 데이터를 수집하는 수단도 발전하고 있다. 수년간 사용되었던 인쇄된 폼의 디자인에서 몇 가지 팁을 배울 수 있다. 텍스트 필드의 구조 텍스트 필드를 사용하여 사용자는, UI에 텍스트를 입력할 수 있다. 텍스트 필드 컴포넌트 디자인은, 상호 작용을 위한 명확한 어포던스(행동을 유도한다는 뜻으로 행동 유도성이라고도 한다.)를 제공하여, 레이아웃에서 필드를 발견할 수 있게 하고, 효율적으로 폼을 완성하고, 쉽게 접근하도록 해야 한다. 1. Container — 인터렉션할 수 있는 input영역 2. Input text — 입력가능한 텍스트 필드 3. Label Text ..