1. UI 디자인 시작하기
- UI(User Interface) 디자인
- 인터페이스란 '접속, 접점'을 의미
- 심미성, 논리와 효율성 그리고 디자인 툴 활용 능력과 디지털 환경의 이해가 필요
- 심미성
브랜드와 어울리면서도 깔끔한 UI는 사용자에게 만족스러운 서비스 경험을 제공
화면에 들어갈 아이콘, 일러스트레이션 등을 제작할 때 목표 고객에게 적합한 톤앤매너를 사용하거나 복잡한 기능을 쓰기 쉽게 정돈하는 것도 브랜딩과 연결 지어 생각해볼 수 있음
심미성을 고려한 시각 작업물은 브랜드 경험과 신뢰도에 기여함 - 논리와 효율성
프로젝트의 목표를 이해하고 달성할 수 있도록 하려면 어떻게 디자인해야 하는지 고민해야 함 (논리) - 디자인 툴 활용 능력
다양한 UI 디자인 툴 가운데 프로젝트, 조직, 현재상황 등을 고려해 적합한 툴을 선정하고 적절히 활용해서 머릿속에 있는 UI를 표현할 수 있어야 함 - 디지털 환경의 이해
벡터나 비트맵과 같은 디지털 이미지를 표현하는 방식뿐 아니라 모바일과 데스크톱의 차이, 안드로이드와 iOS 운영체제에 따른 모바일 환경의 차이까지 알아야함
이를 바탕으로 공통 UI 컴포넌트의 구조, 인터랙션 등을 효과적으로 설계한다면 반복 작업을 최소화할 수 있고 프로토타입도 실제로 구현할 제품에 가깝게 제작할 수 있음
톤앤매너(tone and manner)
색감, 분위기, 스타일 등을 활용해 브랜드를 통일된 콘셉트로 표현하는 것
논리적, 구조적으로 생각하고 표현하는 능력이 중요
프로덕트 디자이너의 확장된 역할
- 프로덕트 디자인 (product design)
제품과 서비스, 즉 웹, 앱 등 디지털 제품을 기획.디자인하는 것을 말함 - 디지털 제품의 맥락을 이해하고 설계하는 프로덕트 디자이너(product designer)의 업무는 시각 디자인 외에도 기획, UX, 개발 커뮤니케이션 등 다양한 영역에 퍼져있음
- 비즈니스, 데이터, UX 플로, 제품 릴리즈 등 제품.서비스의 총체적인 관점을 고려해 디자인하는 '프로덕트 디자이너', 디자인 시스템을 담당하는 '플랫폼 디자이너'라는 직무들이 생겨나고 있음
- 사용자의 심리를 고려해 가설을 세우고 확인하기 위해 개선안을 지속적으로 테스트해야 더 나은 서비스를 만들 수 있음
- 팀원과 이해관계자의 읜경을 경청함으로써 하나의 관점에 매몰되지 않고 다양한 관점에서 서비스를 생각해 볼 수 있고 실제 구현 난이도는 어떨지, 대안은 무엇인지 등 풍부하게 고민할 수 있음
모바일 기기 디자인 환경 이해하기
- 픽셀(px, picture element)
- 해상도 단위 (dp, dots per inch)
- 디지털 화면 디자인의 기준 해상도
- 안드로이드 360X740
- iOS 375X812
- 디자인 효율성을 높이는 1배수와 n배수
- 대부분 모바일 기기는 2~4배수 사이의 밀도를 지원 (화징저하현상방지위함)
- 1배수로 디자인하되 기준 해상도에 맞게 에셋을 내보낼 수 잇어야함
- iOS 환경 해상도
- iOS에서는 pt(point)라는 단위를 사용
- 보통 3배수로 설정해 에셋을 출력함
- 안드로이드 환경 해상도
- dp(density independent pixels), sp(scale independent pixels)라는 단위를 사용
- 보통 4배수까지 설정해 에셋을 출력함
2. 피그마와 가까워지기
- 피그마의 컴포넌트(component)와 디자인 시스템의 개념을 이해하면 애셋을 체계적으로 관리할 수 있음
- 드로잉도 할 수 있는 벡터 기반 툴
백터(vector)
- 점, 선, 면으로 이루어진 오브젝트로, 위치와 색상 값을 기억하므로 이미지를 아무리 확대해도 깨지지 않는다는 특징
- 도형, UI, 아이콘 등 비교적 단순한 오브젝트를 저장하는 데 효과적
- 확장자: AI, SVG, EPS
비트맵(bitmap)
- 이미지의 가로, 세로 픽셀 수와 색상값을 일일이 기억해서 원본 크기보다 확대하면 화면깨짐 현상이 발생하는 이미지
- 비트맵은 사진, 스크린샷, 복잡한 그림 등을 저장하는 데 효과적
- 확장자: PNG, JPG
프레임 속의 프레임
프레임은 어디에 있느냐에 따라 조금씩 특징이 다름
- 루트프레임(root frame, top-level frame)
- 아트보드처럼 주로 전체 그림을 감싸는 용도
- 프레임 속의 프레임(nested frame)
- 루트 프레임 안에 만든 일종의 하위 프레임
- 상위 프레임을 움직이거나 투명도를 조절하는 등 값을 바꾸면 프레임도 영향을 받음
Reference
#의식의흐름 #순간순간 #생각의스냅샷