마소란 UX/UI 이야기

안녕하세요.오늘은 토스의 이모지 폰트 토스페이스에 대해서 알아볼게요.이제는 모르는 사람이 없는 토스앱의 폰트입니다. 1. 토스(Toss)란?토스(Toss)는, 금융을 보다 쉽고 편리하게 만들기 위해 탄생한 종합 금융 플랫폼이죠.토스는 사용자의 금융 생활 전반을 관리할 수 있도록 한 곳에서 편리한 서비스를 제공하며, 직관적이고 심플한 UX/UI로 금융을 잘 모르는 사람도 쉽게 사용할 수 있도록 만들어졌습니다.UX/UI 디자이너라면 어디에서든 여러번 봤을법한 유명한 앱입니다.더 자세한 내용은 토스 홈페이지에서 확인해주세요.  2. 토스페이스? 폰트야 아이콘이야? 이 토스에서 무료로 이모지 폰트를 발행하였는데요.이 토스페이스는 3,600개의 이모지로 만들어진 폰트인데 SVG로도 제공을 하기때문에 폰트로 사용하..

안녕하세요.오늘은 PDF 파일을 피그마에서 불러와 보겠습니다. 자주 사용하는 일은 아니지만 알아두면 편리하겠죠?간단하게 플러그인을 사용해서 불러오기 해볼게요.   1. 먼저 피그마 플러그인에서 PDF로 검색을 한다.그냥 불러오기로는 가져올 수 없는 파일이라 플러그인을 이용하겠습니다.Menu > Plugins > Manago plugins로 들어가서 플러그인 오픈창을 띄워거나피그마에단 패널의 버튼을 이용해 플러그인에 들어갑니다.      2. PDF to Figma 플러그인을 오픈한다.PDF로 검색하여 플러그인 중 하나를 오픈해볼게요.저는 오늘은 PDF to Figma 를 사용해 보겠습니다.선택하면 플러그인의 설명을 먼저 볼 수 있습니다.   'Run'으로 시작해주세요.불러올 파일을 드래그하여 넣은 후 '..

안녕하세요.오늘은 디자이너 일기를 써보려고 합니다.    가끔 카페나 여기저기 돌아다니다 보면 아직 피그마를 배우지 않았거나 UX/UI 디자인을 시작하시려는 분들의 질문들중 이런 이야기가 있더라구요. UX/UI 디자이너들은 피그마로 어디까지 작업하는가? 입니다. 저는 앱을 만들기 시작한지가 10년이 넘었고 피그마의 경우도 3~4년 정도(잘 모름) 사용한 듯 한데요.피그마가 무척 친숙하기에 어느덧 뒤돌아보니 피그마로 거의 모든 작업을 하고 있습니다. (물론 인쇄물은 아닙니다)특히나 배너 작업도 피그마로 모두 작업을 하는데요. 포토샵 너무 느립니다.피그마를 쓰지 않는 분들이 항상 작업물을 Psd로 받기 원하셔서 아주 자주 눈물을 흘리며 Psd작업을 다시 한다죠.하지만!! 오늘은 요구 안하려나? 하면서 항상 ..

안녕하세요.오랜만에 피그마 관련글을 쓰게 되었네요.오늘은 피그마에서 이미지 다운로드(Export)시 사이즈 달라지는 현상에 대해 알아보겠습니다.    디자인 작업을 열심히 마치고 개발자분에게 넘겼는데, 막상 이미지를 다운로드해 보니 디자이너가 작업한 사이즈보다 약 +1씩 다르게 나오는 경우가 있습니다. 사실 피그마에서 이미지 다운로드(Export)시에 자주 발생하는 오류(?) 또는 현상인데요, 저도 그래서 작업 완료한 후 반드시 이미지 사이즈를 확인하는 절차를 거치고 있습니다. 디자이너분 열심히 작업을 잘 해놓고 마지막에 다운로드 사이즈 때문에 실수가 생긴다면 정말 억울하겠죠.아직도 저는 이게 피그마의 버그인 것 같지만 그나마 우리가 해볼 수 있는 수정 방안에 대하여 알아볼게요. 1. 작업 프레임을 소수..

안녕하세요!오랜만에 블로그 글을 써보네요.오늘은 피그마 사용시에 겪게 되는 여러 문제 중 특정 폰트 누락에 대해서 써보겠습니다.  1. 산돌 유료폰트 피크마 누락몇일 전 이벤트 디자인 작업을 하던중 산돌의 격동고딕 폰트가 피그마에 뜨지 않더라구요. 🥹산돌폰트의 경우 ‘구름다리’라는 프로그램으로 폰트를 내 컴퓨터에 적용 체크하면 그 폰트를 사용할 수 있게 되는데 이게 뜨지않았습니다.근데 지인 디자이너분의 말씀으로는 산돌의 경우 안뜨는 폰트가 있다더라 라는 이야기를 듣고 아 격동고딕 폰트는 피그마에서 사용할 수 없구나 라고 생각했는데 다른 디자이너가 그 격동고딕 폰트를 이용해 작업중인걸 보고 저도 적용하려고 찾아보았습니다.해서 포토샵에서 작업했던걸 다시 피그마로 옮기느라 두번 작업을 했네요. 😂이미 피그..

안녕하세요. 오늘은 피그마로 프리젠테이션 PPT를 만들어 보겠습니다. 피그마가 너무 편리해서 저는 문서 만들때도 너무 편하더라구요. 이제 파워 포인트 쓰면 은근 불편하고~ 피그마로 너무 편합니다~ 사실 별로 크게 알아야 할 점도 없고 엄청 쉬워서 많은 설명은 쓰지 않았고 어떻게 하는지 한번 볼게요!~ 다 만든 후 PDF로 변환을 할건데요. 그 방법을 알아보겠습니다. *피그마의 자세한 사용법은 쓰지 않습니다 ;) 피그마는 유튜브에 보시면 잘 나와있어요~ 1. 피그마로 디자인하기 와이드형인 16:9 비율로 1920x1080사이즈로 프레임을 만듭니다. 상단에서부터 프레임을 만들어 기존 피그마 사용하듯이 디자인을 하면 됩니다. 그럼 프레임은 꼭 하단으로 일자로 만들어야 할까요? 바둑판 모양으로 만들어도 되고 편..

안녕하세요.오늘은 최근에 출시된 강원특별자치도체를 살펴보겠습니다. 깔끔한 고딕체에 삐침으로 포인트를 준 강원특별자치도체입니다. 타이틀이나 이벤트배너에 사용하면 딱 좋게 깔끔해서 맘에 드네요~ 빨리 써보고 싶어요. 1. 강원 캐릭터 소개폰트 소개만 하려고 했지만 외에도 CI와 캐릭터가 귀여워서 같이 보고 갈게요.강원도가 지난해 10월 부터 강원디자인진흥원과 공동으로 강원특별자치도 상징물 개발에 착수하여 전 국민 대상 선호도 조사, 전문가 평가 및 강원도의회 의결 등을 거쳐 신규 상징마크(CI), 캐릭터(강원이, 특별이0, 전용서체(강원특별자치도체)를 확정하여 출범 기념식에서 공개했습니다. 강원이는 대한민국 상징동물인 호랑이, 특별이는 반달가슴곰입니다.대중들에게 쉽게 다가갈 수 있는 귀엽고 푸근한 형태의 라..

안녕하세요! 요즘 제가 자주 쓰고 있는 예쁜 폰트가 있어서 소개합니다. 샌드박스의 어그로체인데요 딱 봐도 깔끔하고 예쁘죠? 😄 1. 어그로체 살펴보기 두께가 있는 고딕폰트는 배너의 타이늘이나 PPT의 타이틀 등 활용도가 높아서 정말 좋은데요 어그로체는 귀여운 삐침이 특징인 귀여운 3가지 두께의 폰트입니다. Light / Medium / Bold 3가지를 볼 수 있어서 정말 사용하기 좋아요 😘 샌드박스에서 어그로체 살펴보기 SANDBOX sandbox.co.kr 2. 어그로체 사용해보기 샌드박스 사이트에서 어그로체를 미리 써 볼 수 있어요. 저는 보자마자 바로 다운로드! 참 좋아하는 스타일입니다. 3. 어그로체 다운로드 어그로체는 개인과 기업 모두 무료로 사용이 가능합니다. 자유롭게 수정 재배포도 가능하다..

안녕하세요! 오늘은 기본으로 하게 되는 인쇄작업인 명함에 대해서 알아보겠습니다. 사실 블로그에서 많이 볼 수 있는 글이지만 디자이너가 하는 기본부터 차근차근 글을 써보도록 할게요. 🙂 명함은 제일 기본으로 필수로 하게 되는 인쇄물이 아닐까 하는데요. 너무 쉽기 때문에 간단하게 주의점을 알아보겠습니다. 1. 명함 사이즈, 후가공 확인하기 명함의 사이즈는 명함인쇄를 진행할 사이트에 들어가서 사이즈를 먼저 확인합니다. 제가 자주가는 사이트는 성원애드피아, 디티피아 이 두 가지입니다. 저는 두꺼운 반누보를 많이 사용하고요 기본스타일로 깔끔합니다. 인쇄사이트에서 후가공이 어떤 게 있는지 확인이 가능해요. 후가공은 명함의 귀퉁이에 둥근 컷팅이나 글씨에 금, 은박을 넣거나 구멍을 뚫는 등의 인쇄 후 가공처리를 함을 ..

안녕하세요. 마소란입니다. 블로그를 쓰다보니 뭔가 디자인 자료를 가져오고 글을 가져와서 정리하고 책정리 영화줄거리 정리를 하다보니 이 블로그에 맞는글인가 생각해보게됩니다. 오늘은 이 블로그의 제목과 맞게 17년차 디자이너 이야기를 적어볼까 합니다. 이름을 지을때는 17년이었는데 몇달 전 이야기라서 이제 18년이 맞을거같지만 자세히 살펴보진 않았습니다. 대게 18년이면 디자인 장인이라도 되지 않았나 라고 생각할지 모르지만 경험에 의하면 경력이 많아진다고 크게 실력이 뛰어나거나 남다른 재능을 쌓은것 같진 않다고 생각이 되네요. 어릴때는 그림도 곧잘 그린다는 소리를 들었고 나름 예술적 감각이 있구나 라고 생각되어 디자인을 선택한것 같지만 몇년 일을 하다보니 내가 별것도 아니었구나 라는 생각도 수많이 했고 틀린..