분류 전체보기36 상업용 무료 폰트 사용하기 - 눈누 디자인 작업을 하다보면 필연적으로 폰트를 많이 사용하게 됩니다. 이 때 주의해햐할게 폰트라이센트인데요. 폰트는 잘 못 사용하면 법적인 문제로 커질 수 있기 때문에 회사에서 일하던, 프리랜서로 일하던 꼭!! 폰트가 상업적으로 사용 가능한지 확인하고 사용하는 습관을 들여야합니다! 대표적으로 많이 쓰시는 폰트가 구글의 noto 산스와 네이버의 나눔고딕입니다. 이 외에도 다양한 상업용 폰트를 확인하고 싶다면 아래 눈누 사이트에서 확인하시면 모든 상업용 폰트를 확인해보고 다운받을 수 있습니다. https://noonnu.cc/ 눈누 상업용 무료한글폰트 사이트 noonnu.cc 이렇게 타이핑 해서 각 폰트가 어떻게 보이는지도 확인 할 수 있습니다. 상업 프로젝트를 진행하는 디자이너이거나 개인 프로젝트를 진행.. 2022. 8. 7. [무료 이미지 사이트] 저작권 걱정없는 사이트 PEXELS 디자인 작업을 하다보면, 항상 저작권 문제가 신경쓰이죠?? 저작권이 안걸리는 사진을 쓰면 화질과 퀄리티가 떨어지고, 고화질 이미지는 저작권땜에 사용을 못하죠.. 오늘은 상업용, 개인용 모두 저작권이 무료인 사이트를 소개해 드리고자 합니다. http://www.pexels.com 무료이미지, 저작권 없는 이미지, 무료 이미지 사이트 | Pexels www.pexels.com PEXELS는 고화질 이미지를 무료로 상업적 목적과 개인 모두 사용할 수 있어 디자이너들에게는 너무너무 고마운 사이트입니다. 인물, 자연, 풍경 등 다양한 종류의 고화질 이미지들이 많이 있습니다 검색창에 원하는 종류의 이미지를 영문으로 타이핑하시면 됩니다. 저는 Mountain을 쳐보았는데요 산 관련 고화질 이미지가 엄청 많이 뜨네요 .. 2022. 8. 7. 웹 디자인 그리드 생성 사이트 - Grid.Guid 웹 디자인을 할 때 제일 먼저 해야 하는 것은 그리드 설정입니다. 그러나 이 그리드를 포토샵이나 피그마에서 일일이 계산하고 그리는 것은 프로젝트 경험이 없는 신입 디자이너에게는 쉽지 않을 것입니다. 이럴 때를 위해 각각의 그리드 별로 칼럼 값과 마진 값을 자동으로 계산해서 보여주는 사이트를 소개하려고 합니다. http://grid.guide/ Grid.Guide — Pixel Perfect Grids Welcome to GridGuide! A tool to help you create pixel perfect grids within your designs. Enter your requirements above and we’ll will show you all of the whole pixel combin.. 2022. 8. 7. 피그마(Figma) 꿀팁 : 유용한 단축키 및 설정 모음 자꾸 까먹지만 유용한 피그마 단축키와 피그마 설정 TIP모음 피그마 전체 단축키 보는 법 레이어 레이어 전체 닫기 : Alt + L 화면 확대 : Ctrl + 축소 : Ctrl - 10px 이동 : Shift + 방향키 객체 생성 활성화 R - 사각형 생성 활성화 L - 라인 생성 활성화 F - 프레임 생성 활성화 T - 텍스트 생성 활성화 p - 펜툴 활성화 기타탄축키 타이핑 완료 : Ctrl + 우측 Enter ( 텍스트 타이핑 완료) 모양&변형 가로 뒤집기 : Shift + v 세로 뒤집기 : Shift + h 아웃라인깨기 : Ctrl + Shift + o 그리드 그리드 보기 : Ctrl + Shift + 4 컴포넌트 컴포넌트 만들기 : Ctrl + Alt + K 컴포넌트 찾기/삽입.. 2022. 8. 7. 피그마(Figma) 꿀팁 : 8배수(8px)로 이동 간격 조정하기_Nudge amount 피그마 이용 꿀팁 중에 하나인 이동 간격을 조정하는 법을 공유해 드리겠습니다~! 피그마 화면에서 아래 경로로 들어가서 이동 간격을 조정해 주시면 됩니다! F > Preferences > Nudge amount 기본 설정은 10으로 되어있는데 8로 바꿔주세요~! 그 이유는 보통 모바일 UI는 2, 4, 8배 수로 디자인 작업이 됩니다. 그렇기 때문에 Shift + 방향키로 크게 이동할때 기본 2의 배수인 8배 수로 설정을 해놓으면 계산하기 훨씬 수월하기 때문입니다. 이상, 유용하게 쓰이는 피그마 꿀팁이었습니다. 2022. 8. 7. 웹접근성 가이드 확인하기 Tip! IT업계 그중에서 홈페이지를 제작하는 분들이라면 자연스럽게 웹접근성인증에 대해 익히셨으리라 생각합니다. 제가 웹접근성인증을 진행할 때 가장 힘들었던게 스크린 리더기가 없어서 제대로 들어갔는지 아닌지 확인하기 어렵다는 점 이였습니다! 완벽하게는 아니지만 자체적으로 어느정도 확인 할 수 있는 방법을 알려드리려고 합니다. 1.웹접근성이란? http://www.wa.or.kr/m1/sub1.asp 웹접근성이란? > WA : 한국웹접근성인증평가원 웹접근성이란? > WA > 웹접근성이란? 정보통신접근성(Web접근성)이란? 정보통신접근성 (Web 접근성)은 「지능정보화기본법」에 따라 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장 www.wa.or.kr 웹접근성인증평가원에서 소개하는 내용을 보면.. 2022. 8. 7. 모바일 UI 폰트 최소 크기 모바일을 사용하는 사용자가 점점 늘어나면서 이제 Mobile first는 너무나도 당연해 졌다. 처음 모바일 디자인을 하면, 가장 기본이지만 가장 난감하고 애매한 부분이 폰트 사이즈일 것이다. 너무 기본이라 누군가 명확하게 알려주지는 않지만 신경쓰이는 폰트사이즈 가이드. 예전에는 픽셀기반의 Photoshop으로 UI/UX 디자인을 진행하다보니 스크린 크기에 맞춰 폰트나 아이콘 등을 일일이 대응해야 했다. 하지만 최근에는 Figma 등 백터기반으로 환경이 변화하다보니 추출과정에서 2배수, 3배수 처럼 선택하면 끝나기 때문에 하나의 스크린 화면의 디자인을 만들면 모든 스크린 사이즈를 대응할 수 있다. 그러다보니 더더욱 폰트 사이즈 가이드를 중요하게 생각하게 되는 것 같다. 사실 모두가 공통으로 쓰는 .. 2022. 8. 7. UIUX : 디자인 시스템 가이드라인 - 작업시 유의사항 요즘 새로운 프로젝트를 맡게 되어서 UIUX관련 정보를 정리하고 있습니다. 디자인가이드에 맞춰 컴포넌트를 만들기 전에 디자인가이드를 만들때의 유의사항을 분석하고 적립하기 위해서 아래와 같이정리해 보았습니다. 1.목적과 범위 구체화 [목적] 어떤 이유로 시스템과 디자인 원칙이 필요하다고 생각하게 되었는지 어떤 프로세스에서 디자인 결정이 어려운지 사용자 입장에서 어떤 부분이 디자인 일관성이깨지고 있는지 [범위] 어떤 서비스부터 적용할 건지 어떤 성격의 앱인지 (컴포넌트의 우선순위를 정하기 위해 중요) 2.AS-IS / TO-BE 정의하기 [AS-IS] 현재 브랜드/경쟁사 AS-IS분석을 통해 기능과 콘텐츠 분류 기능단위로 쪼개 비슷한 성격의 UI끼리 묶기 (ex 차량예약, 상담예약, 상세 콘텐츠확인 등) 분.. 2022. 8. 7. UI/UX : 디자인 컴포넌트를 만들 때 주의할 점 디자인 시스템을 만들때 가장 중요한 것 중에 하나가 컴포넌트입니다. 시스템의 시각 요소를 실제 화면에서 어떻게 보여줄지 컴포넌트로 정의를 하기 때문입니다. 컴포넌트에서 중요한 것은 기능의 위계와 시각적 중요도를 표현하는 기능적인 부분과 디자인 요소를 통해 브랜드와 서비스의 이미지를 만드는 이미지적인 부분 이렇게 2가지가 있습니다. 1.컴포넌트 위계 부여시 고려할 점 컴포넌트란? 기능 수행을 위한 모듈의 단위입니다. 즉 사용자가 쉽게 화면을 이해하고 동작하기 위해서는 컴포넌트간의 위계가 명확하고 직관적이여야 합니다. 따라서 컴포넌트는 UI설계 과정에서 부터 고려해서 기능의 속성과 화면의 목적을 정확히 파악해 제작해야합니다. 어떤 기능의 요소인지 명확하게 표현해야 함 중요도를 쉽게 파악할 수 있는 명확한 시.. 2022. 8. 7. 이전 1 2 3 4 다음
