UX/UI 디자인 툴과 사용법

 

UX/UI 디자인 툴

 

1. 피그마 (Figma)

전세계 1위 🖤 피그마는 세계적으로 가장 많이 사용되는 디자인 툴로, 협업과 프로토타이핑에 강점을 지님.

2. 스케치 (Sketch)

주로 대기업에서 사용되며, 피그마와 함께 사용되는 경우가 많다.

3. 어도비 XD (Adobe XD)

삼성 지정 툴 : 삼성에서 기본 사용 툴로 지정된 어도비 XD 통합된 디자인과 프로토타이핑 기능을 제공!

*회사마다 사용하는 툴이 다르므로 다양한 툴을 익혀두면 좋다(:

 

그래픽 디자인 툴

 

포토샵 (Photoshop) 

: 그래픽 디자인의 기본 툴. (우리 함께한지 벌써 12년째..★)

일러스트레이터 (Illustrator)

: 확장 가능한 벡터 그래픽을 만드는 필수적. (너두★)

 

 

고품질 프로토타이핑

 

프로토파이 (ProtoPie) 디자인 핸드오프

: 사용자 테스트와 프레젠테이션을 위한 상호작용이 가능한 고품질 프로토타입을 만드는데 사용.

 

제플린 (Zeplin) — 개발자와의 협업

: 디자인 사양과 자산을 개발자에게 쉽게 전달할 있게 해주는 툴로, 프로젝트 단위로 관리할 있는 장점이 있다(:

 

로티파일즈 (LottieFiles) 애니메이션

: 애니메이션을 코드로 변환하여 사용할 사용됨(:

 

 

앱과 웹의 차이점

 
사용 접근의 차이 브라우저에서 URL 검색하면 바로 접근 가능 스토어에서 설치를 먼저 해야 접근 가능
업데이트 및 유지보수 수정 서버에 적용하면 바로 업데이트 OS 마켓 정책 기준으로 심사를 받아야 업데이트 가능
성능과 호환성 다양한 단말기에 제한 없이 호환성이 뛰어나지만 성능은 앱보다 떨어짐 카메라, GPS 등의 기능 활용이 뛰어나고 네트워크 연결 없이도 동작 가능 (ex.캘린더, 포토 에디터)
검색 용이 O : SEO 기준으로 검색 가능 X : 마켓에서 설치 후 접근
반응형 O : 다양한 디바이스 해상도에 맞춰 제작 (px, em, vw, % 사용) X : 주요 OS 디바이스 해상도에 맞춰 제작 (dp, sp, pt 사용)
개발 비용과 시간 더 적은 비용과 시간으로 개발이 가능하며, 특히 빠른 배포와 유지보수가 필요한 경우에 유리 초기 개발 비용과 시간이 더 많이 소요
개발 언어 HTML, CSS, JavaScript, Python, PHP, Java Swift, Objective-C, Java, kotlin
사용 단말기 제한 없지만 크로스 브라우징 필요 OS 따른 기능적 제한이 존재함
개인화 마케팅 유료 소프트웨어 사용하지 않으면 개인화 마케팅 어려움
개인화 마케팅 가능(Push notification)

 

Android와 iOS 의 차이점

  Android iOS
운영체제 (OS) 구글에서 만든 운영체제 애플에서 만든 운영체제
서체 Roboto San Francisco(SF)
단위 dp, sp pt
탭 크기 48 x 48 dp 44 x 44 pt
내장 네비게이션 O X
메인 네비게이션 상단 탭 하단 네비게이션 바
보조 네비게이션 드로어 메뉴(햄버거 메뉴) 하단 네비게이션 바 '더보기' 메뉴
CTA 플로팅 액션 버튼 상단 네비게이션 바 우측
벡터 에셋 SVG PDF

 

 

Q. 어떤 OS의 사용성이 더 좋을까?

 

정답은 없다. 뭐가  좋고 나쁘다는 어느 OS 익숙하느냐의 차이일 뿐(: 서로 좋다고 느끼는 부분도 다르기 때문이다. 가성비, AS, 삼성페이,  기기와의 호환, 카메라 화소, 감성, 익숙함 ..  그나마 Android와 iOS는 시간이 갈 수록 서로 비슷해져 가는 중이다. 이러한 OS차이를 이해해야하는 이유는 기획하고 개발하는 중간단계에서 UI디자인할때 어떤 OS 설정하고 어떤 디바이스 해상도 규격으로 작업을 할 지이런 것들을 기획과 개발 파트에서 서로 논의가 되는 부분이기에 환경을 이해해야 한다는 것!

 

프로젝트 규모, 기간, 개발 환경에 따라 디자인 방식이 달라진다. 

ex. Android  우선적으로 진행, 타깃은 50대로 갤럭시 S8~9 사용률이 높을 경우.

-> Android 가이드라인, 컴포넌트, 해상도, 단위 맞춰 디자인~개발, QA  플레이스토어  배포

 

ex. MVP 하이브리드 앱으로 개발 진행할 경우.

-> Android iOS 차이를 이해하고, 기준이 되는 OS 선정  작업. 아예 다른 부분은 별도로 제작

반응형