본문 바로가기

💻 기획ㆍ디자인16

개발자가 꼭 알아야 할 피그마 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.

잘 보이는 UI디자인 팁 - 색상 대비 검사로 더욱 선명한 디자인하기 모두가 편리하게, 더욱 선명한 디자인으로! UI 디자인을 하다 보면 놓치기 쉬운 색상 대비 체크! 그동안의 프로젝트에서는 웹 접근성을 엄격하게 지켜야 하는 경우가 잘 없어서 거의 감(?)으로 색상을 골랐었는데, 이번에 고령자 대상 서비스를 디자인하면서 '잘 보이게'라는 것을 객관적으로 수치화해야 했다. '잘 보이게'하는데 중요한 요소 중 하나인 색상은 색상대비 검사로 잘 보이는지 아닌지를 객관적으로 판단할 수 있다. 색상대비 검사 방법이 생각보다 간단하고 결과물도 선명하게 잘 표현이 되어서 다른 프로젝트에서도 습관처럼 쓰면 좋을 것 같아 포스팅으로 남겨둔다. 1. 왜 색상대비 검사를 해야할까? 디자이너인 내 눈에는 잘 보이지만 누구에게나 이 '안보이지롱'글자가 잘 보일까? 이 회색 컬러(#EAEAEA)로.. 2021. 11. 26.

은근 찾기 힘든 제플린 구독 취소, 구독 해지 방법 제플린 구독 해지 버튼을 찾아서 얼마 전에 제플린이 프로젝트 멤버 수만큼 과금하는 방식으로 요금제가 변경되었다는 포스팅을 한 적이 있는데, 프로젝트 멤버가 꽤 많던 우리 팀은 비용의 부담을 이기지 못하고 결국 제플린은 해지하기로 했다. (해지할까 말까 고민만 1년 한 듯ㅎ) 제플린 유료 요금제 변경 - 디자이너, 개발자 멤버 수에 따라 추가 비용을?! 제플린 요금제가 바꼈다. 더 비싸게!!! 😭 혹은 더 싸게??? 🤑 나는 3개 프로젝트까지 등록 가능한 'Starter'라는 요금제를 이용해 매달 19달러를 결제하고 있었는데... 'Seat' 개념이 추가된 Team-Organiz chingguhl.tistory.com 과감하게! 제플린 구독 해지를 하기 위해서 오랜만에 제플린을 찾았는데, 읭? 구독 취소 .. 2021. 11. 10.

쉽게 정리한 모바일 앱 종류와 개념 for 디자이너 모바일 앱 종류의 특성을 이해하면 디자이너로서 아래 2가지 큰 도움이 된다. 1. 디자인의 기본 요소(사이즈와 비율 등) 개념 인지 2. 각 개발자와 효율적인 커뮤니케이션 앱 종류에 따라 개발 방식도 개발자 포지션도 다르다. UI 디자이너에게 캐릭터 디자인을 요청하는 것이 당연하지 않은 일처럼 말이다. 프로젝트 초반, 여러 가지를 계획하고 협의할 때, 꼭! 확인해야할 앱 종류. 👉 모바일 앱의 종류와 간단한 개념 1. 네이티브 앱 과거에서부터 지금까지 메이저 앱들이 주로 개발한 방식. 예시 : 페이스북, 인스타그램, 유튜브, 카카오톡, 카카오 뱅크 등 [장점] 안정적인 성능과 다양한 네이티브 기능 활용(위치, 음성, 지문 등) 높은 디자인 완성도 [단점] 비용↑ 시간↑ 유지보수↑ 효율↑ ios와 andr.. 2021. 8. 15.

인스타그램 리디자인 비하인드! UX UI 디자이너 추천 넷플릭스 다큐 - 앱스트랙트 #이언 스폴터 편 다이나믹한 영상으로 시간이 순삭되는 넷플릭스 오리지널 다큐멘터리 '앱스트랙트 : 디자인의 미학' #이언 스폴터 편 인스타그램 로고는 누가, 왜, 어떻게 바꿨을까? 메이저 앱들의 아이콘은 대부분 단순화가 되었지만 인스타그램은 계속해서 때를 기다리고 있었는데, 그 때가 왔을 때 리디자인을 맡게 된 사람이 이언 스폴터. 처음엔 듣자마자 하기 싫다고 했다고...😂😂😂 인스타그램 공동 창립자 케빈 시스트롬은 리디자인 프로젝트가 싫었다고 한다. 원래 로고와 앱을 본인이 디자인했기 때문에...😏 (농담인 듯?) 이언은 인스타그램 측에 3개월 동안 틀여 박혀있을 수 있는 사무실을 요청하고 그동안은 아무것도 볼 수 없을 거라고 말한다. 대단한 자신감!!! 이언은 다양한 실험을 했는데, 한 번은 인스타그램 직원들을 불러 .. 2021. 5. 22.

제플린 유료 요금제 변경 - 디자이너, 개발자 멤버 수에 따라 추가 비용을?! 제플린 요금제가 바꼈다. 더 비싸게!!! 😭 혹은 더 싸게??? 🤑 나는 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.

신입도 경력도 들어볼만한 패스트캠퍼스 디자인 온라인 강의 후기 - UX UI 디자인 초격차 패키지 강의 추천 다른 디자이너들은 어떻게 할까? 내가 하는 방법이 맞을까? 한 직장에 오래 다니거나 혼자 프리랜서로 일한다면 이런 불안감이 존재한다. 그건 바로 나😭 이럴 때 좋은 강의는 머릿속 나뒹구는 정보를 정리하고 내가 어떤 점이 부족한지 깨닫는데 큰 도움이 된다. 하지만 연차도 있는데... 기초부터 알려주는 UX강의는 좀... 그런데... 하며 고민하던 중 패스트캠퍼스 1+1 온라인 강의 이벤트 발견😲 CSS강의를 수강하려고 했기 때문에 득템 기분으로 신나서 수강신청 완료! 아직 반의 반도 듣진 못했지만 베리베리 만족하고 있어 포스팅을 남겨본다. 초격차 패키지 한 번에 끝내는 UX/UI 디자인 추천 이유 3가지 1. 저렴한 비용 10만원 초반대 가격에 UX UI 디자인 이론과 실무 팁, XD, 피그마, 프로토파이.. 2021. 4. 19.

업무용 메신저 슬랙 사용법 - 제2의 카톡처럼 되지 않기 업무용 메신저 대세!'슬랙' 그런데 말입니다. 협업 툴로 딱 좋은 슬랙도잘못 이용하면 알림 지옥에빠져버릴 수 있죠. 1. 나랑 상관없는 메시지 알림 받기 싫어!2. 쓸모없는 메시지 알림 받기 싫어!3. 중요한 메시지, 놓치고 싶지 않아!4. 남아있는 업무 목록, 한 번에 보고 싶어! 알림 지옥에 빠지지 않고위 니즈를 충족시킬 수 있는슬랙 사용법을 정리해봤습니다. 🖐슬랙 대화내용은 임의로 작성하여 이미지로 편집했습니다. 모바일에서는 잘 안 보일 수 있어, PC에서 보는 게 더 좋아요. #슬랙을 카톡처럼 쓴다면... 위 슬랙 화면 처럼,모든 팀원이 새 메시지를그때그때 보낸다면이런 경우들이 생길 수 있습니다. 1. 구성원 전체에게 잦은 알림이 울린다. '네', 'ㅋㅋㅋ'같은 메시지마저도...2. 주제가 다른 .. 2021. 2. 18.

꼭 기억해야할 UX writing 4가지 기본 원칙 - 사용자 중심 글쓰기 UX 라이팅 우리는 상대방의 말과 말투에서 정보를 얻기도 하고 감정을 느끼기도 한다. 인터넷 서비스도 마찬가지. 일관적으로 명확하고 친절하게 말함으로써 사용성을 개선하고 브랜딩을 강화할 수 있다. UX Writing공부를 하며 읽었던 포스팅과 내 생각을 정리해봤다. ■ 간단 정의 UX writing는 사용자가 쉽게 이해할 수 있는 단어와 문구를 기획하고 쓰는 일 ■ 효과적인 UX writing의 기준 '일관되게, 명확하게, 간결하게, 유용하게' 4가지에 따라서 예제와 함께 정리해본다. 1. 일관되게 말한다. 가장 우선은 '일관성' 말투를 '일관되게' 유지한다는 것은 1. 서비스의 목적과 타겟을 분명히 하고 2. 단어와 문장을 쓸때 '명확, 간결, 유용' 등 여러 가지 요소의 조화와 우선순위를 결정할 수 있는 원칙을 .. 2020. 9. 15.

디자이너의 즐겨찾기 - ② 무료 디자인 소스, 무료 이미지 사이트, 디자인 정보 등 (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.

이전 1 2 다음

티스토리툴바