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

안녕하세요 찐망고입니다. 일 년에 두 번 많게는 세 번 정도 수업을 하다 보면, 매번 웹사이트들을 보면서 현재 이런 형태의 레이아웃들이 유행이구나 싶을 때가 있단 말이죠?아무래도 디자인의 시작이 레퍼런스 혹은 클라이언트의 요구들이다 보니한 번에 모아보면 아 이건 진짜 많이 쓰는 형태의 디자인이구나 싶어요  저는 이런 식으로 수업 전후 3~6개월 양의 웹사이트를 폴더를 나눠서 정리를 해보는데오늘부터는 정리된 폴더를 포스팅으로 공유해 볼까 합니다. 현재 폴더는 2024년 7월부터 11월 7일 현재까지의 레이아웃디자인을 카테고리별로 묶어봤어요.   첫 번째 카테고리는 그러데이션입니다. 웹에서 사용하는 그러데이션 하면 떠오르는 이미지들이 있죠? 물론 여러분 병맛 ppt 무지개 그 보노보노 그거 생각하면 안 되고..

안녕하세요 찐망고입니다. 오늘은 참고할 만한 우리나라 기업의 기술블로그들을 공유해 볼 건데요.이 블로그들은 다양한 기술적인 인사이트와 디자인 시스템에 대한 내용을 담고 있어,여러 분야의 최신 트렌드와 실무에 대해 배우는데 도움이 될 것 같아 포스팅해봅니다.  1. 네이버 D2네이버 D2(Developer`s Delight)는 네이버에서 운영하는 기술 블로그로, 개발자와 엔지니어들을 대상으로 다양한 기술적 인사이트와 정보를 제공하는 플랫폼인데요. 이 블로그는 네이버 개발자들이 직접 작성한 글을 통해 웹, 모바일, 인공지능, 빅데이터 등 다양한 분야의 최신 기술 트렌드와 개발 경험을 다루는 글들이 올라옵니다. 디자인시스템을 개발에 적용하는 방법피그마와 git을 활용하여 자동화된 디자인 시스템을 구축하는 방법..

안녕하세요 찐망고 입니다. 요즘은 디자인 시안을 모바일 버전부터 먼저 뽑는다는 이야기가 있죠? 제가 전에 포스팅했던 단위 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. 뷰포트와 디바이스 ..

안녕하세요 찐망고입니다. 오늘은 조금 재밌는 사이트를 찾아내서 포스팅 해보는데요.. 회원가입을 하면 (구글로그인가능) 원하는 카테고리에 맞춰 이미지를 보정할 수 있는데 합성, 보정, 일러스트도 가능하구여.. 무료와 유료가 합쳐져 있는 사이트 입니다. 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..