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

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

안녕하세요 찐망고 입니다. 피그마의 최대장점은 웹폰트를 지원한다는 점인데요. Google Fonts: Google에서 제공하는 웹폰트 라이브러리를 지원합니다.Google Fonts(8/24 update): 구글 폰트의 최신 업데이트 버전을 포함한 항목입니다. Variable Fonts: 하나의 폰트 파일로 여러 가지 두께, 너비, 기울기 등 다양한 스타일을 표현할 수 있는 폰트형식입니다.   웹 폰트를 바로 사용할 수 있는 건 가장 큰 장점이지만,반대로 컴퓨터에 설치된 로컬폰트를 바로 사용할 수 없습니다.  이때 Font Installer를 설치하면, 컴퓨터에 설치된 폰트를 Figma에서도 인식하고 사용할 수 있죠. 해당 페이지에서 각자의 환경에 맞춰 설치해 주시면 됩니다. Figma Downloads ..

안녕하세요 찐망고입니다.ai카테고리 만들고 아무것도 안 하는 것 같지만 나름 이 앱 저 앱 사용해 보는 중인데요. 오늘은 Gamma.app이라는 ai사이트를 하나 소개해볼까 합니다.Gamma는 프레젠테이션, 문서, 웹사이트를 쉽게 만들 수 있게 도와주는 AI기반 플랫폼인데요.디자인이나 코딩 기술 없이 사용할 수 있고,다양한 템플릿과 데이터 시각화 기능을 통해 시각적으로 매력적인 콘텐츠를 제작해 줍니다. https://gamma.app/create  텍스트로 붙여 넣기를 가볼까요?파일을 가져올 수도 있습니다.제 블로그 글을 복붙 해볼 거예요 조회수 높은 이글입니다. 모바일 디자인을 위한 해상도와 DPI 이해하기: 안드로이드와 iOS의 차이점안녕하세요 찐망고 입니다.오늘은 안드로이드와 iOS단위에 대해 포스..

안녕하세요 찐망고입니다. 저는 포트폴리오를 만드는 훈련교사이다 보니첫 취업이거나 사회생활경험이 적은 친구들에게 이런저런 이야기를 하는 편이에요.제 나이대가 제 친구들은 관리자급이고 친한 제자들은 한창 열심히 일할 주임, 대리들이다 보니그들 사이의 이야기를 듣는 게 너무 재밌어 짜릿해 이전에 신입이든 경력직이든 첫 출근을 했을 때 겪는 상황을 글로 써 놓은걸 어디선가 보았는데(인스타였나) 너무 재밌더라고요. ㅎㅎ 웃자고 쓴 글이니까 너무 진지하게는 생각하지 않았으면 해요.출처를 몰라서 일단 글만 공유해봅니다.혹시 출처 아시는 분은 제게 댓글을 ^^;  1. 처음 들어갔는데 사수가 있다면?사수의 말을 잘 듣습니다. 인수인계하는 건 목이 아픈 일입니다. 광동 비타 500 제공 또는 함께 담배 타임을 가지도록 ..

안녕하세요 찐망고입니다오늘은 tab과 swiper슬라이드를 연결할 건데요.예전 jQuery때랑 코드 부분이 조금 달라져서 포스팅해 봅니다.  1. Tab과 슬라이더를 연결2. Tab클릭 시 슬라이더가 첫 시작위치로 로드 되어야 함3. Tab클릭시 슬라이더는 모두 loop처리되어야 함 이 세 가지 조건에 맞는 슬라이더를 구현해 보도록 합니다. Tab부분은 기본적인 리스트 형태로 마크업을 할 거고요.리스트 하나는 ALL버튼입니다.처음 로드 되었을 때와 ALL버튼을 누르면 전체 swiper-slide가 다 보이게 할 거예요. 아래는 html코드입니다. ALL EYE LIP BASE OTHERS  플러그인은 swiper를 이용하여 따로 ..

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

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

안녕하세요 찐망고입니다.드디어..드디어 CSS가 추가로 지정되는 속성 없이 코드 한 줄로 요소를 수직정렬하는 기능이 생겼네요. 과거 요소들을 수직정렬하기 위해(특히 center) 행했던 수많은 수직정렬의 역사들이 주마등처럼 스쳐 지나가네요. 새로 코드가 생긴 건 아니고, 원래 flex나 grid에서 사용했던 CSS코드였는데요.flex나 grid 없이 사용이 가능하게 되었습니다. (와! 짝짝짝)align-content: center; 테스트를 여러 번 해보니 기본 좌우 정렬해서 수직정렬하는 건flex나 grid를 사용하면 될 것 같고a링크요소들처럼 버튼처리해서 만드는 요소들은 수직정렬하기가 편하겠어요. center 외 start, end로 값을 지정할 수 도 있겠지만 안 쓸 거 같죠..?크롬 123, 파이..

안녕하세요 찐망고 입니다. VScode는 익스텐션이 많은데요.그중 open in browser를 설치하면 단축키를 이용하여 HTML파일을 브라우저로 열 수 있습니다. 익스텐션 아이콘을 클릭하고, Open In Default Browser를 검색합니다.  설치하면 되겠죠? 설치 후 마우스 우클릭 해보면 Open In Default Browser메뉴가 생겼습니다.  Alt + B는 현재 열려 있는 HTML 파일을 기본 브라우저에서 열기 위한 단축키이고,Shift + Alt + B는 브라우저를 선택해서 HTML 파일을 열 수 있는 단축키입니다.

안녕하세요. 찐망고 입니다. 오늘은 보그코리아 웹사이트의 마지막 하단 섹션을 클론 해 볼 건데요. 보그 코리아 (Vogue Korea)컬렉션부터 스타일, 쇼핑, 뷰티, 라이프스타일, 셀러브리티까지 지금 가장 핫한 트렌드 소개www.vogue.co.kr 하단섹션은 왼쪽과 오른쪽으로 나뉘어서왼쪽 섹션은 grid나 flex를 이용한 리스트섹션, 그리고 오른쪽은 배너모양의 이미지가 한 장 있어요.스크롤 시 오른쪽 이미지가 고정되어 푸터섹션에 도착할 때까지 움직입니다.   오른쪽 배너이미지는 처음엔 absoulte였다가 다시 fixed로 변경할 예정이고,fixed변경 시 좌표값이 부모요소 기준에서 뷰포트 기준으로 변경되므로그 부분을 염려해서 CSS작업을 해볼 예정이에요 왼쪽과 오른쪽을 저렇게 fix클래스 요소로 ..