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

안녕하세요 찐망고입니다. 카드형 레이아웃은 방대한 콘텐츠를 한눈에 제공하는 특징이 있는데요.카드형 레이아웃이 주는 정보의 풍성함은 매력적이지만,너무 많은 정보를 한꺼번에 제공하면 오히려 사용자에게 부담을 줄 수 있습니다.그래서 여유롭지만 세련된 느낌을 주면서도 강조할 부분에 자연스럽게 시선을 이끌고 싶다면?바로 비어있는 공간을 만드는 것! 비어있는 공간을 효과적으로 활용하면 전체적으로 세련된 인상을 줄 뿐만 아니라, 특정 콘텐츠에 자연스럽게 시선을 집중 시킬 수 있습니다.여백이 주는 여유로움과 깔끔함을 통해 사용자는 중요한 정보를 더 빠르고 명확하게 파악할 수 있게 되죠   때로는 비어있는 공간을 대체해 일정한 형태나 패턴을 활용하는 것도 좋은 방법입니다.정해진 형태나 패턴을 비어있는 부분에 배치하면 페..

안녕하세요 찐망고입니다. 웹디자인을 하다 보면 하나의 섹션에 방대한 콘텐츠를 넣어야 할 때가 있죠?이때 중요한 건, 각 콘텐츠가 한눈에 들어와 사용자가 쉽게 탐색할 수 있도록 만드는 것!하지만, 콘텐츠에 우선순위를 두고 싶다면???바로 박스의 크기를 다르게 설정하는 방법입니다.박스 크기를 달리하면 사용자는 자연스럽게 큰 박스에 시선을 먼저 두게 되죠.이 방식은 강조하고자 하는 주요 정보나 콘텐츠를 빠르게 전달하며,우선순위에 따라 정보흐름을 조절하는데 매우 효과적입니다. 아래 예시처럼 말이죠!  주요 정보는 크고, 보조 정보는 작게 하는 이런 방식은 한 가지 주제를 중심으로 상세한 설명을 제공합니다.좌우 대칭 구조로, 왼쪽에 큰 박스를 배치해 가장 중요한 정보를 강조하고,오른쪽에 작은 박스를 배열해 보조 ..

안녕하세요 찐망고입니다. 웹디자인에서 배경이미지를 사용하는 이유는 크게 세 가지라 생각합니다.브랜드의 정체성 강화시각적 분위기 조성메시지의 감성적, 직관적 전달 배경 이미지는 웹 페이지의 주제를 시각적으로 강조하며, 사용자에게 강렬한 첫인상을 남기는 중요한 역할을 합니다.그래서 우리가 접속하는 거의 모든 사이트의 히어로 섹션이 전체 배경이미지 혹은, 영상으로 이루어진 거죠히어로섹션(Hero section)은 웹페이지의 상단에 위치한 큰 시각적 영역인데요.방문자가 페이지에 접속했을 때 가장 처음으로 접하는 부분인 만큼웹사이트의 첫인상을 좌우할 테니, 배경을 꽉 채우는 건 당연한 원리겠죠?   배경이미지를 섹션마다 많이 사용하는 경우도 있는데요.풀페이지 웹사이트처럼 전체화면을 꽉 채우는 레이아웃에서는 각 섹..

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

안녕하세요 찐망고입니다.ai플러그인 관련 포스팅을 해달라고 했는데..제 맘에 쏙 드는 플러그인이 없어 포스팅을 안 하려다가..숏츠나 릴스보고 혹 하신 분들에게 이 글을 전합니다. 이전에 추천한 플러그인 중에 html.to.design이라는 플러그인이 있었죠?문서 링크를 연결하면 피그마 파일로 짠 하고 만들어주는 플러그인이었죠. 하지만 완벽하지 않다고...  관련포스팅글 피그마 추천 플러그인안녕하세요 찐망고입니다.벌써 5번째 카테고리인 플러그인 포스팅으로 넘어왔네요 저는 피그마 플러그인을 많이 사용하는 편은 아닌데요.그래도 있으니까 편하다 하는 것들 위주로 포스팅 해uiweb.tistory.com   이번에 포스팅할 플러그인은 디자인 캡처이미지를 클론디자인해 주는 플러그인인데요.Codia Ai Design..

안녕하세요 찐망고입니다. 피그마가 업데이트 이후 툴바나 패널이 조금 바뀌었어요.오토레이아웃이나 컴포넌트, 베리언트, 컨스트레인트 등도 조금 바뀌었지요.영상을 만들면 조금 편할 거 같은데 왜 저는 아직도 텍스트로 포스팅을 하려고 하는 걸까요.옛날사람이라 그럼... 이전 글 참고 해주시고 포스팅을 이어할게요. 피그마 컴포넌트, 베리언트 (Component, Variants)안녕하세요 찐망고입니다  오늘은 피그마의 Component와 Variants에 대해서 포스팅 해볼까 해요일단 피그마 이전글들을 참고해주시구요  0. styles등록 (text, color)  피그마 ui-스타일가이드, 스타일uiweb.tistory.com 피그마에서 컴포넌트와 베리언트는 디자인 시스템을 효율적으로 관리하고 재사용성을 높이는..

안녕하세요 찐망고입니다.오늘은 피그마를 이용하여 말풍선 컴포넌트를 만들어 볼 건데요.하나 만들어 놓으면 어떤 텍스트를 써도 어떤 방향으로도 사용하기 편한 말풍선이 가능합니다.일단 기본적인 Auto Layout과 Variant 정도만 알면 될 것 같아요 이전에 썼던 포스팅을 읽으면 피그마 말풍선을 쉽게 만들어 볼 수 있는데,컴포넌트로 만들기 위해선 몇 가지 작업이 더 필요해서 새로 포스팅해봅니다.   기본적으로 도형을 이용해서 툴팁박스를 만들 때아래쪽 꼬리 부분은 방향이 top, right, bottom, left로 바뀔 수 있으니 Auto Layout을 이용하여 만들 거예요.   도형 두 개를 합치고 꼭 해야할 것꼭 constrain을 맞춰주셔야 해요. 이후 컴포넌트로 등록합니다.컴포넌트 크기 확인해보세..

안녕하세요 찐망고입니다. 웹에서 자주 사용 되는 말풍선(툴팁, 채팅 말풍선 등)을 피그마로 만들어 볼 건데요.Auto Layout과 Constraints를 이용해서 만들 수 있습니다.  일단 말풍선 모양을 만들 건데요.사각형 도형과 삼각형 도형을 합치고컴포넌트로 등록해야 합니다.   텍스트를 쓰고 섹션 프레임을 씌워서 Auto Layout을 먼저 해줍니다.말풍선과 Auto Layout을 해줄 건데요말풍선 컴포넌트를 잘라서 Frame1안에 붙여 넣어줄 거예요 둘이 겹쳐야 하는데 겹쳐지지 않고 저렇게 따로 놀아요그래서 저 Union컴포넌트를 앱솔처리해줄 거예요. 위 아이콘을 누르면 Union컴포넌트 아이콘 모양이 달라지면서 텍스트와 겹쳐집니다.참고로 오토레이아웃방향은 세로나 가로나 상관없고요중요한 건 레이어..

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

안녕하세요 찐 망고입니다. 최근 Config 2024에서 재설계된 Figma UI3을 소개받았는데요.새로운 UI3은 디자인 경험을 단순화하려고 노력한 흔적이 보입니다.그리고 생각보다 많이 바뀌었어요. 해당 링크를 참고 삼아 포스팅해보려고 합니다.https://help.figma.com/hc/en-us/articles/23954856027159-Navigating-UI3-Figma-s-new-UI  내비게이션 패널:UI 최소화: 클릭 아이콘으로 탐색패널과 속성패널을 축소할 수 있음파일 이름 및 위치:  파일이름 옆 드롭다운 아이콘을 통해 파일이동, 라이브러리, 브랜치생성, 버전기록등을 손쉽게 수행할 수 있음.Assets탭: 구성요소를 검색, 탐색, 삽입하는 과정이 더 쉬어짐     - 이전 피그마 page..