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

보호되어 있는 글입니다.

안녕하세요 찐망고입니다간만에 포스팅을 하는..우연히 어떤 글을 보니챗지피티가 아이폰 아이콘을 만들어주더라구요! 만드는건 쉽게 만들어주는데막상 아이폰에서 어떻게 변경하는지 모름일단 쳇지피티에게 아이폰 아이콘을 만들어 달라고 하면 되는데 예시아이콘을 같이 보내주면 좋다이느낌으로 아이폰 아이콘을 더 만들어줘예시로 보여주는 아이콘으로 부탁해네이버블로그, 스레드, 티스토리아이콘!예시를 주면 더 나은 결과물이 나온다아래는 쳇지피티로 만든 아이폰 아이콘들 다운받아 쓰셔도 됩니다누군가를 많이 닮은 캐릭터네요 그저 닮았을 뿐 😏이렇게 세트로 아이콘을 각각 다운로드 한 후에아이폰 단축어를 실행 시킵니다오른쪽 상단에 선택 + 버튼을 누른다 새로운 단축어를 실행 후 아래 하단에앱 열기를 누른다앱열기 화면에서 두가지를 해주고..

안녕하세요 찐망고입니다. 이전 포스팅에서 피그마의 Variable을 다뤘고, 디자인 토큰이 어떤 개념인지도 대충 알겠다! 싶다면, 이제는 여러 디자인 시스템에서 실제로 토큰 네이밍을 어떻게 하고 있는지 살펴보는 게 순서겠죠. 디자인 토큰은 디자인 시스템의 스타일 가이드 요소인 색상, 글자, 간격 같은 속성을 변수로 정의해 코드화한 값입니다.반복적으로 사용되는 디자인 속성을 효율적으로 관리하기 위한 일종의 추상화된 변수라고 할 수 있죠.즉, 자주 사용하는 스타일 속성을 정의하고 이를 코드로 변환하면 디자인 시스템 전반에 걸쳐 일관된 스타일을 유지할 수 있게 됩니다. 가장 대표적인 토큰은 구글의 머터리얼 디자인 토큰이에요. 피그마에서 바로 쓸 수 있는 머터리얼3 디자인 키트도 제공되고 있죠. 클릭..

안녕하세요! 찐망고 입니다.혹시 디자인 토큰에 대해서 들어보신분 🤚 이전포스팅에서 Variable에 대해서 이야기하면서 나온게 토큰이죠? 피그마는 이젠 디자인과 개발 협업을 도와주는 프로그램으로 자리잡고 있어요.HTML은 프로그래밍언어가 아니죠? CSS도 마찬가지죠 하지만 CSS는 은근 까다로운 친구란 말이죠.쉽게 봤다가 뒷걸음질 몇번 쳐야해 그리고 또 CSS도 꾸준히 새로운 기능이 추가돼서 놓치면..하지만 모 어렵지는 않어 ㅋㅋ 여튼, CSS를 쓰기 불편했던 것 중에 하나가 반복되는 셀렉터와 반복되는 속성들 때문인것도 있거든요.그래서 등장한게 SASS/LESS 같은 전처리기들인데..여기서는 변수를 도입해서$primary-color: #1A1A1A; 이렇게 한번만 정의해두고, 필요할 때마다 불러다 ..

안녕하세요 찐망고 입니다.피그마에 Variable이라는 개념이 생겼는데 이걸 베리언트랑 같다고 인식을 하더라구요!이건 아님..구글에다가 피그마 베리에이블 치는데 자꾸 제 블로그 베리언트가 나온다면서빨리 포스팅을 해야겠다고 마음먹고자 시작한 글입니다. 피그마에서 Variable은 디자인 속성을 값으로 저장해두고, 필요할 때 불러와서 일관되게 적용할 수 있는 기능을 뜻합니다.예를 들어 색상 hex값 #F8F8F8를 직접 쓰는 대신 Gray/50 같은 이름으로 변수화해 두면,나중에 변수값만 바꿔도 그 변수를 사용한 모든 디자인이 한번에 업데이트 되는것을 뜻합니다.CSS의 클래스, JS의 변수랑도 비슷하죠? Variable(변수)값을 저장하고 재사용하는 개념 (색상, 간격, 수치, 문자열 등)모드별(light/..

보호되어 있는 글입니다.

안녕하세요 찐망고 입니다.폰트관련 카드 뉴스를 만들다가 내용이 길어져서 블로그 포스팅으로 먼저 정리해보려고 합니다. 😊 현재 웹이나 앱을 디자인 하는 직종에 있는 사람이라면기본적으로 어떤 폰트를 많이 쓰고 있는지 알고 있을 텐데왜 이폰트를 많이 사용할까? 왜 이폰트가 트렌드가 되었을까에 대해 고민해본적이 있을까 싶다.이게 나름 다 이유가 있고 앞으로 주목할 폰트까지 정리해 보았으므로 포스팅을 쭉 한번 읽어보길 바라는 마음에 시작! 1. 노토산스의 시작처음 노토산스(Noto Sans) 가 출시됐을 때, 기존 유료 고딕 폰트의 대체제로 큰 주목을 받았다.한국어·중국어·일본어를 모두 지원하는 다국어 호환성과 무료 배포가 강점이었다.자간이 다소 넓지만, 웹에서는 letter-spacing을 조절하면 충분히 ..

안녕하세요 찐망고입니다. 피그마에서 컬러 시스템을 구성하고 관리할 때 유용한 컬러 관련 플러그인들이 있어요.그중 제가 자주 쓰는 플러그인 몇 가지를 소개해볼게요! 첫번째 포스팅 할 플러그인은 Color Palettes입니다.Color Palettes는 색상 조합을 손쉽게 만들고, 스타일로 바로 저장 가능합니다. Color Wheel+ 메뉴를 클릭하면 색을 지정하는 팔레트가 나오고 상단 메뉴에서 다양한 컬러 조합 스타일을 선택할 수 있죠. Analogous (유사색): 부드럽고 조화로운 느낌Monochromatic (단색 계열): 통일감은 있지만 다소 단조로움Triadic (삼색 대비): 생동감 있고 균형 잡힌 느낌Tetradic (사색 대비): 다채롭고 화려하지만 조절 안 하면 산만할 수 있음C..

안녕하세요 찐망고입니다.초보자들이 피그마 작업시 꼭 알아야 할 6가지 포인트를 정리하고자 포스팅 하려고 해요 1. 모든 요소는 반드시 프레임 안에 배치할 것 화면에 보인다고 끝이 아님. 레이어 패널에서 프레임 밖에 빠진 요소는Auto Layout, Export, 개발자 전달 시 누락될 수 있음 2. Clip Content 옵션 확인은 필수프레임에 Clip Content가 체크돼 있으면프레임을 벗어난 객체는 화면에 보이지 않음→ 진짜 프레임 밖인지, 숨겨진 건지 헷갈릴 수 있으니 레이어 확인 필수 3. 좌표·크기·여백은 소수점 없이 정수로 → 1px 오차가 정렬 깨짐·버튼 밀림 문제를 유발함→ x, y, width, height, padding, radius 등은 정수값으로→ 단, 아이콘은 예외 (벡터..

안녕하세요, 찐망고입니다.UX 평가 시리즈 두 번째 포스팅입니다. 지난 1편에서는 좋은 UX의 정의를국제표준인 ISO 9241-11 기준으로 정리해봤습니다.UX의 핵심은✔ 효과성 (Effectiveness)✔ 효율성 (Efficiency)✔ 만족도 (Satisfaction)이 세 가지 요소로 설명되었죠. 그렇다면 이제,실제 UI 화면과 기능 하나하나를 어떻게 평가할 수 있을까요?바로 그 질문에 답해주는 체크리스트가 있습니다.닐슨의 10가지 UX 휴리스틱(Heuristics)인데요. 닐슨 휴리스틱이란?1990년, UX 전문가 Jakob Nielsen과 Rolf Molich가 발표한사용성 평가 기준 10가지입니다.가장 기본이 되는 화면 인터페이스 점검 기준으로 자리 잡았죠. 닐슨의 10가지 UX 휴리스틱1)..