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

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

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

안녕하세요 찐망고입니다. 재미있는 사이트가 있어 공유해보려고 해요 ㅎㅎ 두사이트 모두 펜툴연습을 해보는 사이트인데요. 누끼를 업으로 삼은 분들 펜툴은 필 수 겠죠~? 1. The Bezier Game 작업하는 순서를 먼저 보여주고 그 후에 따라해보는 방식인데요. 과정을 미리 보여주기때문에 연습해보기 좋은 것 같아요 https://bezier.method.ac/ The Bézier Game A game to help you master the pen tool bezier.method.ac 2. Shape Tyle 방향선을 수정해서 원만한 곡선을 만들어서 실제 방향선과 얼마나 일치하는지 보여주는 게임인데요 저 펜툴 진짜 잘다루는데 74% 뭐지? https://shape.method.ac/ Shape Type..

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..

안녕하세요 찐망고입니다.해야할 컨텐츠가 산더미인데 일단 이번에 종강하여 면접보는 친구들을 위해 포스팅을 해볼게요. 면접을 보다보면 회사마다 분위기는 다르겠지만일반적으로 물어보는 질문들이 있습니다.테스트를 하는 회사도 존재하구여.포트폴리오 자체를 100% 믿지 않는다는 거죠 ㅎㅎ  물론 질문을 하지 않아도 알고 있어야 하는 내용들도 존재하구요.오늘은 그런 부분과 관련된 포스팅을 해볼게요.  이론적인 질문들 1. 웹표준과 웹접근성에 대해 설명해봐라 웹표준은 크로스브라우징에 맞춰 W3C 등의 표준화 기구에서 정의 해준 명세에 맞게 마크업 하는 것 웹접근성은 이용자, 이용자의 장비에 관계없이 이용할 수 있는 웹 사이트를 구성하는 것. 시각장애인 등도 이용 할 수 있으며, 여러 PC나 장비에서도 접근 할 수 있는..

안녕하세요 찐망고 입니다. 웹사이트에서 푸터에 해당하는 부분을 보면 꼭 들어가는 내용이 있죠?카피라이트, 사업자정보, 그리구 개인정보처리방침!!!!   개인정보처리방침이란?개인정보보호법 제 30조에 따라 모든 개인정보처리자에게는 개인정보 처리방침을 수립 및 공개할 의무가 있는데요'개인정보처리자'란 개인정보보호법 제2조 제5호에 의거해, 업무를 목적으로 개인정보파일을 운용하기 위해개인정보를 처리하는 공공기관, 법인, 단체 및 개인등을 말합니다. 따라서 고객 개인정보를 보유한 개인정보처리자뿐만 아니라,내부 임직원의 개인정보를 수집 및 이용하는 개인정보처리자도 개인정보 처리방침을 수립해야 합니다.(다만, 공공기관의 경우에는 개인정보보호법 제32조에 따라 행정자치부장관에게 등록된 개인정보파일에 한하여 개인정보 ..

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

안녕하세요 찐망고 입니다. 오늘은 Form요소를 CSS를 이용하여 디자인하는 포스팅을 해볼건데요. Form요소들은 기본적으로 본인들의 스타일이 적용되어있는데요 잘 살려서 작업해 보도록 하죠 기본 예시는 selecto웹사이트를 참고하였습니다. 수업 예제로 셀렉토 사이트를 클론코딩 해봤는데요. 오른쪽에 지역검색과 매장명, 매장서비스검색에 체크박스를 디자인해보려구 합니다. // HTML 지역검색 도/시선택 강원 경기 서울 인천 구/군 선택 매장명 02 매장 서비스별 검색 무선인터넷 기능 흡연시설 보유 주차가능 야외테라스 보유 모바일 가맹점 select요소를 이용해서 드롭다운 목록을 만들었는데 처음 보이는 부분의 디자인을 위해 span요소를 감싸주었구요 체크박스는 체크박스형태는 CSS가 가능하지만 체크모양 자체..

안녕하세요 찐망고입니다.벌써 5번째 카테고리인 플러그인 포스팅으로 넘어왔네요 저는 피그마 플러그인을 많이 사용하는 편은 아닌데요.그래도 있으니까 편하다 하는 것들 위주로 포스팅 해볼게요.  일단 이전글.. 0. styles등록 (text, color) - 이전글 참조2023.07.03 - [피그마] - 피그마 ui-스타일가이드, 스타일 등록하기 피그마 ui-스타일가이드, 스타일 등록하기안녕하세요 찐망고 입니다. 웹을 어느정도 정리하고 피그마강의를 써볼까 했는데.. 이렇게 두서가 없어??? 피그마도 순서대로 업로드해야하는데 일단 급한것부터 올려볼게요.. 수업시간에 CJFRESHuiweb.tistory.com1. Layout grid2023.07.05 - [피그마] - 피그마 Layout grid 피그마 L..