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

와 찐망고입니다..다른 발 빠른 분들에 비하면 조금 늦은 포스팅인데요.. 피그마가 업데이트를 했어요 이번엔 꽤 아주 훌륭한 내용들이 많은데 각각 업데이트된 내용을 피그마로 직접 작업 후 포스팅 하려다가 ㅎㅎㅎ그럼 시간이 더 걸릴 것 같아 올해 컨퍼런스 요약된 주요 업데이트 내용을 포스팅해보려 합니다. Figma Config 2024 컨퍼런스는 6월 26일부터 27일까지 샌프란시스코에서 열렸으며,디자이너와 개발자를 위한 혁신적인 기능과 업데이트를 발표했습니다. 일단 youtube 링크부터  youtube내용을 정리해 보면 Figma AI ( search for simillar명령어 ) 완성된 디자인(app)의 기존 피그마 파일 찾기 (01:44):  이미지 업로드로 유사한 디자인 파일 탐색 변경할 수 있음..

안녕하세요 찐망고 입니다. 요즘은 디자인 시안을 모바일 버전부터 먼저 뽑는다는 이야기가 있죠? 제가 전에 포스팅했던 단위 dp에 대해서 이해하고 나면, 디자인 시안은 1 배율에 맞는 화면으로 작업하는 게 좋다는 것을 알 수 있을 거예요. 단위 DP란 뭘까요?안녕하세요 찐망고 입니다. 오늘은 안드로이드와 iOS단위에 대해 포스팅해보겠습니다. 일단 해상도를 좀 알아볼까 해요 해상도는 화면에 보이는 픽셀의 총 개수를 이야기합니다. 요즘 나오는 스uiweb.tistory.com 보통 1배율은 안드로이드 해상도 기준 360*640, iOS는 375*812를 기준으로 합니다. 그렇다면 마크업은 어디까지 해야 할까요?  Statcounter에서 우리나라 운영체제 시장점유율을 검색해 보면, 2022년까지만 해도 윈도의..

안녕하세요 찐망고입니다. 클론 코딩을 하던, 클론 디자인을 하던 레퍼런스를 찾다 보면 전체 사이트를 캡처해야 하는 상황이 있단 말이죠~ 당연히 알고 있을 거라 생각했는데 생각보다 몰라서 못쓰던 사람들도 많아 포스팅해봅니다. chrome 웹스토어에 접속합니다. https://chromewebstore.google.com/category/extensions?utm_source=ext_sidebar&hl=ko&pli=1 Chrome Web Store 브라우저에 새로운 기능을 추가하고 탐색 환경을 맞춤설정합니다. chromewebstore.google.com 티스토리 화면을 캡처해 봤는데요. 한 장의 이미지나 혹은 pdf로 저장이 가능합니다. 참고로 fixed 걸린 요소들은 연속으로 캡처되는 단점이 있습니다~

https://collectui.com/challenges/sign-up 안녕하세요 찐망고입니다. 이전 글에 디자인 참고 레퍼런스 사이트관련 글을 포스팅했는데요. 디자인 레퍼런스 참고사이트 1. WWIT - What Was IT 국내의 UI/UX 모바일 패턴을 수집하는 사이트 입니다. UI 키트, 아이콘, 템플릿 등 다양한 디자인 리소스를 제공합니다. 모바일APP디자인이 한눈에 보이죠? 기획이나 디자인에 레퍼 uiweb.tistory.com 오늘은 ui디자인 레퍼런스 사이트를 포스팅 해보려고 합니다. 1. Mobbin - iOS 앱 UI 사이트 https://mobbin.com/browse/ios/apps 2. UI Garage - ui플랫폼 별 분류 https://uigarage.net/ UI Gara..

안녕하세요 찐망고입니다. 디자인 어렵죠? 이론적인 게 머리에 충만해도 막상 흰 창을 보면 머부터 시작해야 할지 막막하고 그래서 조금 쉽게 풀어보고자 해요. 제품상세페이지디자인! 상세디자인이라고 하는 그 이미지들. 기억나네요.. 2006년인가 지마켓에 옥수수 판매 상세페이지를 만들어달라던 농부님.. 그때 당시엔 뭣도 모르고 내 눈에 이쁘고 내 눈에 이쁘면 그만이지 하는 마음으로 작업했는데.. 지금 생각해 보면 참.. 그 이후로 상세디자인 작업을 종류별로 참 많이 해봤는데요.. 이번 포스팅엔 전체적인 구성을 기획하여 작업하면 좋을지에 대해 포스팅해볼게요.. 레퍼런스는 각종 채널에서 확인이 가능하죠? 저는 와디즈와, 네이버스토어, 쿠팡을 많이 보는데요. 특히 와디즈 베스트 펀딩 상세페이지들은 정말 좋은 레퍼런..

안녕하세요 찐망고입니다. 가끔 이벤트 상세디자인이나 배너들을 보다 보면 어떤 폰트를 사용했는지 궁금한 디자인들이 있더라고요 저만 그런 거 아니죠? 저 폰트는 뭘까 하고 고민하면서 구글링 해보니 비슷한 폰트를 찾아주는 사이트가 있어 포스팅해 봅니다. https://www.sandollcloud.com/#schpop 산돌구름 폰트가 필요할 때 언제 어디서나! www.sandollcloud.com:443 링크에 접속하면 이미지를 업로드하거나 url을 입력하라는 창이 뜹니다 저기에 이미지를 업로드하고 해당 폰트 영역을 선택하면~~~ 짠~~ 이렇게 리스트 형태로 뜹니다. 이 이미지를 업로드해서 쿼터 이상 구매 시라는 텍스트 박스를 눌러봤거든요. 프리텐다드 폰트가 딱? 물론 정확한 폰트가 아닐 확률이 더 높긴 하지..

안녕하세요 찐망고 입니다. 오늘은 웹내비게이션에 대해 알아보려 합니다. 웹사이트에 접속한 사용자가 현재 위치와 이동경로를 파악할 수 있도록 돕는 내비게이션은 매우 중요합니다. 이는 사용자가 빠르게 원하는 목적을 달성할 수 있도록 도와주죠. 내비게이션은 그 구성에 따라 여러 단계로 나누어집니다. 예를 들어 사이트는 노란색 컬러에 해당하는 1단 메뉴를 눌렀을 때 빨간색에 해당하는 2단 메뉴가 나오고 빨간색을 기준으로 파랑계열의 3단 메뉴가 나옵니다. 이처럼 3단계 내비게이션은 깊이가 있지만, 너무 많은 단계는 사용자에게 혼란을 줄 수 있어 피하는 게 좋습니다. 반응형 사이트를 설계할 때는 PC와 모바일에서 내비게이션을 어떻게 표현할지 고민해야 합니다. 때로는 한 개의 내비게이션을 공유하고, 때로는 두 개의 ..

안녕하세요 찐망고 입니다.오늘은 안드로이드와 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. 뷰포트와 디바이스 ..

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

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