찐망고'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)..

안녕하세요 찐망고입니다. UX평가시리즈관련 포스팅을 해볼까 하는데요. UX 평가, 감으로만 하는건 아니죠? UX 평가 시리즈 구성① 좋은 UX란 무엇인가 – ISO 9241-11 ② UX 체크리스트 – 닐슨 휴리스틱 10원칙 ③ 사용자 경험을 데이터로 측정하는 법 – 구글 HEART 프레임워크 “사용자 친화적인 UX 설계”란 도대체 뭘까? UX라는 단어는 흔하게 쓰이지만,어떻게 평가할지 기준이 없는 경우가 너무 많죠.그저 예쁜 UI, 매끄러운 동선, 감으로 판단하진 않으셨나요? UX 평가에는 국제표준으로 정의된 명확한 기준이 있습니다.바로 ISO 9241-11에서 정의한 사용성(Usability)입니다. 이 표준은 UX의 핵심을 단 3가지 요소로 나눕니다:1. 효과성 (Effectiv..

안녕하세요 찐망고입니다올해 회사사이트를 하나 만들었는데 그때 사용한 폰트가 Gmarket Sans였는데굵기가 세개밖에 없는건 너무 아쉬었어요프리텐다드랑 섞어 쓰면 참 이쁨지마켓폰트와 비슷하지만 좀 더 굵기가 다양해진 폰트가 있는데요페이퍼로지 폰트입니다2024년에 출시되었으며, PPT 유튜버 ‘페이퍼로지’ 김도균과 디자이너 이주임이 공동으로 제작하였습니다한글은 G마켓산스, 영문은 Montserrat 폰트를 결합한 구조입니다. 한글과 영문의 시각적 조화를 의도적으로 추구하여, 한/영 혼용시 자연스럽고 세련된 결과물을 낼 수 있죠상업적 이용이 가능한 무료 폰트이며, SIL 오픈폰트라이선스(OFL)에 따라 판매·라이선스 변경을 제외하면 수정·재배포·상업적 사용이 모두 가능합니다파워포인트 전용으로 기획된 만큼, ..