💻 기획ㆍ디자인/Tool11 개발자가 꼭 알아야 할 피그마 10가지 기능 (디자이너와 개발자가 협업하기 위한 피그마 기본 기능) 피그마가 익숙하지 않은 개발자와 디자이너가 개발자와 협업하기 위해 기본적으로 적용해 두면 좋을 피그마 기능 10가지! 🖐🏻 참고 : only view 모드의 화면 캡처임. (edit view(편집가능), only view(편집불가) 모드에 따라 UI와 방법이 조금 다름.) 1. 디자인 스타일 아무것도 누르지 않은 상태에서 Inspect를 보면 기본 폰트, 컬러, 그리드 스타일이 정의되어 있다. 이것은 디자이너가 설정을 해둬야 확인 할 수 있으니, 혹시~ 이런 것이 보이지 않는다면... '자주 쓰는 폰트와 컬러를 스타일로 만들어주세요.' 라고 요청하기! (거절한다면 피그마를 제대로 활용하지 못하고 있는 디자이너일 확률이 높...) 2. 디자인 속성 속성을 알아야 할 객체 선택하고 오른쪽의 Inspect를 .. 2022. 9. 25. 내가 보려고 쓰는 피그마 단축키 모음 한동안 안쓰면 자꾸 까먹는 피그마 단축키 모음! (전체 피그마 단축키는 'Ctrl+shift+?'하면 종류별로 볼 수 있음.) 모양&변형 가로로 뒤집기 : Shift + v 세로로 뒤집기 : Shift + h 아웃라인깨기 : Ctrl + Shift + o 그리드 그리드 보기 : Ctrl + Shift + 4 컴포넌트 컴포넌트 만들기 : Ctrl + Alt + K 인스턴스 깨기 : Ctrl + Alt + B (컴포넌트는 바로 안깨지고 아예 삭제해야 하는 듯?) 컴포넌트 찾기/삽입 : Ctrl + I 오토레이아웃 생성 : Shift + a 오토레이아웃 제거 : Alt + Shift + a 컴포넌트 이름 한번에 수정하기 : 이름 변경할 컴포넌트 전체 선택 후, Ctrl + R (이름 끝에 자동 넘버링 가능) .. 2022. 1. 30. 초간단 hwp 파일 열기 - 클릭 몇 번만 하면 끝나는 한글 파일 변환 프로그램 설치 필요 없는 초간단 hwp 파일 열기 정부과제나 기관이 얽혀있는 프로젝트를 하다 보면 한글파일(.hwp) 확인해야 할 때가 많은데, 굳이 한글 프로그램을 설치하기도 그렇고 뷰어 다운로드하는 것도 귀찮을 때! [ '파일 업로드→클릭'만 하면 끝 ] 초간단 hwp 파일 열기 사이트 'allinpdf'를 추천! 👇🏻 바쁘신 분들을 위해 바로 본론부터 👇🏻 ① 아래를 누르면 바로 PDF 변환 페이지로 이동함 (https://allinpdf.com/kr/hwp-to-pdf) PDF Converter - Convert files to and from PDFs Online Free Free Online PDF converter to convert your files to and from PDFs. Con.. 2021. 12. 23. 은근 찾기 힘든 제플린 구독 취소, 구독 해지 방법 제플린 구독 해지 버튼을 찾아서 얼마 전에 제플린이 프로젝트 멤버 수만큼 과금하는 방식으로 요금제가 변경되었다는 포스팅을 한 적이 있는데, 프로젝트 멤버가 꽤 많던 우리 팀은 비용의 부담을 이기지 못하고 결국 제플린은 해지하기로 했다. (해지할까 말까 고민만 1년 한 듯ㅎ) 제플린 유료 요금제 변경 - 디자이너, 개발자 멤버 수에 따라 추가 비용을?! 제플린 요금제가 바꼈다. 더 비싸게!!! 😭 혹은 더 싸게??? 🤑 나는 3개 프로젝트까지 등록 가능한 'Starter'라는 요금제를 이용해 매달 19달러를 결제하고 있었는데... 'Seat' 개념이 추가된 Team-Organiz chingguhl.tistory.com 과감하게! 제플린 구독 해지를 하기 위해서 오랜만에 제플린을 찾았는데, 읭? 구독 취소 .. 2021. 11. 10. 제플린 유료 요금제 변경 - 디자이너, 개발자 멤버 수에 따라 추가 비용을?! 제플린 요금제가 바꼈다. 더 비싸게!!! 😭 혹은 더 싸게??? 🤑 나는 3개 프로젝트까지 등록 가능한 'Starter'라는 요금제를 이용해 매달 19달러를 결제하고 있었는데... 'Seat' 개념이 추가된 Team-Organization-Enterprise 요금제로 업그레이드(?) 됐다. Seat는 프로젝트 멤버수대로 추가요금을 받겠다는 것. 디자인 가이드 수고를 덜어준 걸 생각하면 연간 72달러 or 월 8달러 '이정도면 짱 훌륭하지' 싶지만! (Team 요금제 기준) 중요한건 ★ SEAT SEAT SEAT 프로젝트에 필요한 개발자, 디자이너가 15명이라면 15 Seat로 설정. 기본 금액(1인)이 월 6달러이고 여기서 곱하기 15 = 매달 13만원 정도? (Team 요금제 기준) 멤버 수가 적다면 .. 2021. 5. 6. 업무용 메신저 슬랙 사용법 - 제2의 카톡처럼 되지 않기 업무용 메신저 대세!'슬랙' 그런데 말입니다. 협업 툴로 딱 좋은 슬랙도잘못 이용하면 알림 지옥에빠져버릴 수 있죠. 1. 나랑 상관없는 메시지 알림 받기 싫어!2. 쓸모없는 메시지 알림 받기 싫어!3. 중요한 메시지, 놓치고 싶지 않아!4. 남아있는 업무 목록, 한 번에 보고 싶어! 알림 지옥에 빠지지 않고위 니즈를 충족시킬 수 있는슬랙 사용법을 정리해봤습니다. 🖐슬랙 대화내용은 임의로 작성하여 이미지로 편집했습니다. 모바일에서는 잘 안 보일 수 있어, PC에서 보는 게 더 좋아요. #슬랙을 카톡처럼 쓴다면... 위 슬랙 화면 처럼,모든 팀원이 새 메시지를그때그때 보낸다면이런 경우들이 생길 수 있습니다. 1. 구성원 전체에게 잦은 알림이 울린다. '네', 'ㅋㅋㅋ'같은 메시지마저도...2. 주제가 다른 .. 2021. 2. 18. 디자이너의 즐겨찾기 - ② 무료 디자인 소스, 무료 이미지 사이트, 디자인 정보 등 (for 초급 디자이너) UI 디자이너들이 많이 쓰는 ⭐즐겨찾기⭐ 사이트를 정리해봤다. 초급 디자이너들을 위해, 아래 세 가지 분류로 각각 대표 사이트를 한 가지씩 소개하고 앞으로는 분류별로 다양한 사이트들을 조금씩 정리해서 포스팅할 예정이다. 무료 디자인 소스 인사이트 벤치마킹 첫번째, 무료 디자인 소스 사이트 1. 무료 이미지 Pixabay https://pixabay.com/ko/ 정말 많이 쓰는 무료 이미지 사이트로 대부분 이미지가 상업적 용도로 사용 가능하고 출처를 밝히지 않아도 된다. unsplash https://unsplash.com/ 무료 이미지 대표 사이트 하나만 올리려고 했는데, pixabay에는 인물 사진의 양과 종류가 아쉬워서 추가로 올려본다. upsplash의 다른 사진들도 훌륭하지만 매력 있는 다양한 .. 2020. 8. 9. 디자이너의 즐겨찾기 - ① 크롬 즐겨찾기 관리 팁 오랜만에 즐겨찾기 목록을 🧹대청소🧹했다! 즐겨찾기 대청소를 하며 '즐겨찾기 관리 방법'과 '디자인 실무자가 즐겨찾기 해두면 좋은 사이트' 정보를 나누면 좋을 것 같아서 포스팅해본다. 오늘은 먼저 나만의 즐겨찾기 관리 팁, 소소하지만 유용한 몇 가지를 소개해보겠다. 1. 계정별로 다르게 세팅하기 나는 주로 Gmail 계정을 쓰고 인터넷 서핑도 크롬으로 하기 때문에 즐겨찾기 관리도 크롬으로 하고 있다. 또 업무에 따라 계정이 다른 경우가 있어서 계정별로 필요한 즐겨찾기 목록을 관리하고 있다. 계정 전환은 크롬 오른쪽 상단에 프로필 이미지를 눌러 쉽게 할 수 있다. (이전에 이 방법을 몰랐을 때는 매번 로그인, 로그아웃을 하거나 시크릿 모드 창을 열어서 다른 구글 아이디로 로그인을 하는 수고를 했었다.) 메인.. 2020. 7. 11. 반응형 웹디자인 사이즈, 그리드 (Adobe XD 반응형 웹디자인 하는 방법) XD 쓰고 나서는 반응형 웹디자인을 해본 적이 없어서 다시 공부할 겸 쓰는 포스팅. 나중에 급하게 또 인터넷을 뒤지지 않기 위해서 반응형 웹디자인 시작할 때, 필요한 정보와 링크를 모아뒀다. 1. 간단한 정의 1_1. 반응형 웹이란? 다양한 화면의 폭에 따라 유동적으로 레이아웃이 변화하는 웹(리소스가 1개) 1_2. 반응형과 적응형 차이- 반응형웹 : 모든 화면에 하나의 템플릿으로 제작 / 적응형웹 : 지원할 디바이스(화면)에 따라 별도의 템플릿 제작 🔗 반응형웹으로 만들어진 사이트 볼 수 있는 곳 Media Queries mediaqueri.es 2. 반응형웹 프로젝트 디자인할 때, 체크 포인트 ✓ 반응형or적응형 확실하게 확인! 해달라는대로 무조건 그냥 하다간 낭패를 볼 수 있다. (가끔은 정말 놀랍.. 2020. 4. 2. Adobe XD Study_2편:프로토타입 애니메이션(by.어도비코리아 온라인 세미나) 지난 1월 22일 Adobe 온라인 세미나에서 '협업을 통한 디자인 생산성 가속화'라는 제목으로 XD 강의를 했다. 잘 몰랐던 부분이 많아 시간 될 때 복습하기로 했는데, 써먹어야 할 프로젝트가 생겨서 급하게 복습을 하며 까먹지 않기 위해 포스팅한다. 내용이 조금 많아서 소소한 팁과 애니메이션 두 부분으로 나눴다. ※ 본 포스팅의 캡처 이미지는 Adobe 온라인 세미나 영상 화면입니다. 1. 화면 진입 애니메이션 & 무한 루핑 애니메이션 적용하기 Xd 애니메이션 강의 따라서 샘플로 한번 만들어 봤다. 화면의 요소들이 스르륵 나타나고 배경화면의 컬러와 사이즈가 무한 루핑 되며 변하는 효과다. 화면 진입 - 각 요소들이 시간차를 두고 부드럽게 스르륵 나타나는 애니메이션 화면의 제일 오른쪽 'login-3'과.. 2020. 2. 22. Adobe XD Study_1편:소소한 팁(by.어도비코리아 온라인 세미나) 지난 1월 22일 Adobe 온라인 세미나에서 '협업을 통한 디자인 생산성 가속화'라는 제목으로 XD 강의를 했다. 잘 몰랐던 부분이 많아 시간 될 때 복습하기로 했는데, 써먹어야 할 프로젝트가 생겨서 급하게 복습을 하며 까먹지 않기 위해 포스팅한다. 내용이 조금 많아서 소소한 팁과 애니메이션 두 부분으로 나눴다. ※ 본 포스팅의 캡처 이미지는 Adobe 온라인 세미나 영상 화면입니다. 1. 스타일 가이드 (=에셋 정리 문서) 만들기 상황에 따라, 정리하는 스타일이 다 다르겠지만... 강사님은 표지, 컬러, 폰트, 내비게이션, 아이콘 등등 각 요소를 개별 아트보드로 만들어서 정리한다고 한다. 왜냐면 PDF로 내보내기 해서 PDF로 보면 누구나 쉽게 확인할 수 있고 출력도 할 수 있기 때문 = 별도의 스타.. 2020. 2. 21. 이전 1 다음 반응형
