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

안녕하세요 찐망고입니다. h요소는 heading의 약자로 제목을 뜻합니다. 블록요소구여 html에서 제목요소는 웹 사이트에서 각각의 컨텐츠에 제목 역할을 할 때만 사용할 수 있는 요소 입니다. 글자가 커진다, 여백이 생기네? 글자를 두껍게 만들생각으로 사용하시면 안됩니다. 각각의 검정색 박스를 메인에 들어가는 각각의 컨텐츠라고 생각하면 그 컨텐츠에는 주제가 되는 제목역할을 하는 요소가 제목요소인 입니다. 제목요소1 제목요소2 제목요소3 제목요소4 제목요소5 제목요소6 숫자가 커질 수록 대제목에서 대제목, 중제목, 소제목 역할을 하는 것이죠. 정리를 해보면 h1요소는 html문서에서 한번만 사용 가능! 대체로 로고에 많이 사용하죠~ h2-h6요소는 상황에 맞춰 책의 목차 제목처럼 사용! 시멘틱 마크업시 필..

안녕하세요 찐망고 입니다.오늘은 안드로이드와 iOS단위에 대해 포스팅해보겠습니다. 1. 해상도란 무엇인가?해상도는 화면에 표시되는 픽셀의 총 개수를 이야기합니다.최신 스마트폰들의 해상도를 살펴보면 다음과 같습니다.갤럭시 Z 플립5: 2640 x 1080갤럭시 S23+: 2340 x 1080아이폰 14: 2532 x 1170아이폰 14 Pro: 2556 x 1179아이폰 14 Pro Max: 2796 x 1290  2. 픽셀 밀도(pixels per inch, ppi)와 중요성픽셀 밀도는 화면의 선명도를 결정하는 중요한 요소로, 1인치 안에 들어가는 픽셀의 수를 나타냅니다. 예를 들어, 아이폰 14 Pro Max는 1인치 안에 460 x 460개의 픽셀이 들어있다는 의미입니다.   3. 뷰포트와 디바이스 ..

안녕하세요 찐망고입니다. 카카오 메신저에서 URL을 공유할 때 나오는 썸네일...본적 있으신가요?  Open Graph Protocol이라고 페이스북에서 정의하고 만든 공개 표준화된 meta tag protocol인데요 하나의 URL이 페이스북에 공유될 때 표시될 컨텐츠를 정의하는 것을 목적으로 만들었고,표준으로 공개후 위 그림처럼 메신저에 URL이 공유되면서 썸네일등에 활용되는 거죠  관련 내용을 잘 포스팅해준 글이 있어 링크를 걸어봤구요 SNS의 시대, SEO와 SNS의 상호 관계웹페이지와 SNS의 상호작용을 위해 만들어진 두가지 표준 Meta tag에 대해서 알아봅니다. OG 태그의 경우 카카오에서도 활용되면서 국내에서 이제는 필수값이 되었죠.…seoguide.kr  요약을 해보면  실제..

HTML문서에서 HTML기본구조는 작업중인 페이지에 필수로 들어가는 요소들 입니다. 1. Doctype Document Type Declaration, DTD라고 문서형식선언이라하는데 각 버전마다 Doctype이 다른데 현재는 html5버전을 사용하고 작업중인 html문서에게 htm5버전으로 작업하겠다고 선언하는 것 이다. 2. html, head, body html - 문서의 시작 lang속성을 적용하여 문서를 ko (한국어) 형식으로 선언한다 head - 문서의 말머리 문서에 필요한 정보를 넣는다 meta요소, title요소, 외부스타일시트, 외부스크립트, style요소, script요소등을 넣을 수 있다. title - 문서의 제목 브라우저 탭 위치에 제목형태로 보인다. body - 문서의 본문 브..

안녕하세요 찐망고입니다. 오늘은 NH농협리츠운용모바일 사이트를 클론디자인해서 네비게이션에 인터렉션을 걸어볼겁니다. 일단 피그마는 디자인패널과 프로토타입 패널로 나누어지고, 프로토타입에서 인터렉션을 걸 수 있어요. Interractions에 더하기 아이콘을 클릭하면 이벤트와 애니메이션을 각각 고를 수 있는 메뉴가 뜨는데요 원하는 이벤트와 애니메이션을 찾아 골라주면 끝이긴 한데 디테일한 인터렉션을 걸어주려면 프레임작업을 조금 해주는게 좋아요 오늘은 간단하게 네비를 보였다 숨겼다 정도만 해볼게요 오픈오버레이는 현재 프레임위에 새프레임을 위로 올리는 건데. 위치값을 지정할 수 있어요 Overlay settings에서요 저는 메인프레임과 네비프레임이 같으므로 센터로 정렬을 했고, 오른쪽에서 왼쪽으로 보이기 위해 ..

안녕하세요 찐망고 입니다. 오늘은 디자인 관련 피그마 플러그인을 추천해볼건데요.. Iconify나 Unsplash처럼 엄청 자주쓰는건 아니지만 그래도 있으면 나름 쓸만한 플러그인들입니다. 이전 발행글도 참고해주세요~ 2023.07.14 - [UIUX디자인/피그마] - 피그마 추천 플러그인 피그마 추천 플러그인 안녕하세요 찐망고입니다. 벌써 5번째 카테고리인 플러그인 포스팅으로 넘어왔네요 저는 피그마 플러그인을 많이 사용하는 편은 아닌데요. 그래도 있으니까 편하다 하는 것들 위주로 포스팅 해 uiweb.tistory.com ARC - Bend your type! 텍스트를 먼저 쓰고 난 뒤 해당 플러그인을 실행시키면 밴드형태로 모양을 바꿀 수 있는데요. 글씨가 각각 하나씩 분리가 되고, 원형태도 가능해서 편..

안녕하세요 찐망고입니다. 오늘은 조금 재밌는 사이트를 찾아내서 포스팅 해보는데요.. 회원가입을 하면 (구글로그인가능) 원하는 카테고리에 맞춰 이미지를 보정할 수 있는데 합성, 보정, 일러스트도 가능하구여.. 무료와 유료가 합쳐져 있는 사이트 입니다. Hotpot.ai Hotpot.ai helps you create amazing graphics, pictures, and text. AI tools like AI Art Generator spark creativity and automate drudgery while easy-to-edit templates empower anyone to create device mockups, social media posts, marketing images, app i..

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

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

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