ECC/피그마 스터디

[Do it! 프로덕트 디자인 입문 with 피그마] 7-4 ~ 8-3장

B2C Business to Customer IT 뿐만이 아니라 일반인을 대상으로 하는 모든 비즈니스 ex. SNS의 피드 B2B Business to Business 기업과 기업 간의 모든 비즈니스 ex. SNS의 피드 사이의 광고 시스템 담당 디자이너는 지금 만든 컴포넌트를 앞으로 다른 사람이 사용할 수도 있다는 것을 염두에 두고 컴포넌트를 쉽게 사용할 수 있도록 정리해야 한다 파편화 : 재사용성을 염두에 두지 않고 디자인한 상태 ex. 컴포넌트나 스타일로 묶어서 관리하지 않은 경우 형상 관리 디지털 제품의 상태를 ‘언제’와 ‘무엇’의 개념을 활용해 체계적으로 정리하는 모든 작업 - 버저닝 제품의 현재 상태를 숫자로 기록하는 방식 디지털 제품의 업데이트를 기록하기 위해 쓰이는 방식 앱 이름 [majo..

[Do it! 프로덕트 디자인 입문 with 피그마] 7-1 ~ 7-3장

디자인 시스템 : 반복적인 디자인 요소를 조직적으로, 효율적으로 관리하는 것 디자인 시스템의 목표 : 실무자의 프로덕트 디자인 업무 효율성 극대화 디자인 시스템의 단계 1. 만드는 서비스의 어떤 요소들에 시스템화가 필요한지 조사하기 (ex. 실무자 대상으로 사용자 인터뷰/설문/워크샵 진행) 2. 컬러, 폰트, 그리드 등을 미리 정의하고 일관적으로 사용 3. 버튼, 카드, 드랍다운 등 기초 UI 컴포넌트 만들기 4. 컴포넌트 하나에 다양한 추가 정보 넣기 5. 앞에서 만든 다양한 컴포넌트를 조합해 필요한 레이아웃을 어떻게 구성할 수 있을지 페이지별, 레이아웃별로 고민 6. 디자인 시스템 배포 및 모니터링 7. 커스텀 가능한 영역 고민 8. 조명 플랜 (디지털 화면의 다크 모드와 라이트 모드) 9. 오픈 행..

[Do it! 프로덕트 디자인 입문 with 피그마] 6-1 ~ 6-3장

기획 콘셉트 ui에 들어간 기능이 정말 필요할지, 혹은 적용하기 쉬울지 등등 고려 사항을 더욱 체계적으로 반영하기 위해 기획이 필요하다. 콘셉트 UI, 목적에 맞게 활용하기 기능이 우리 상황에 필요한지, UI를 구현하는 것이 어떤 의미가 있을지 기획 관점에서 생각해 보면 좋다 레퍼런스 UI, 기획에 맞게 검토하기 좋은 기획이 떠오르지 않을 때에는 이미 출시된 앱의 기능을 다시 살펴보는 것이 좋다.. 와이어프레임 화면 설계, 화면 사이의 플로를 비롯해 좀 더 실제적인 레이아웃을 그려 보는 과정 플로를 그리기 전에 와이어프레임을 연결하는 이유 UI, 인터랙션 디자인, 기능 개발 등 이후 어떤 작업이 필요한지 파악할 수 있다. 흐름을 보며 비효율적이거나 모순적인 플로를 초기에 발견하고 개발 전에 미리 수정할 ..

[Do it! 프로덕트 디자인 입문 with 피그마]5-1 ~ 5-4장

로고 디자인하기 선 끝을 둥글게 만들기 snap to pixel grid를 끄고 디자인하면 세밀하게 조절할 수 있다 구글 안드로이드 개발자 가이드의 Google Play 아이콘 디자인 페이지에서 로고 제작 가이드를 볼 수 있다. https://developer.android.com/google-play/resources/icon-design-specifications?hl=ko Google Play 아이콘 디자인 사양 | Android Developers Google Play의 앱/게임에 새로운 아이콘 체계가 도입됩니다. 여러 개발자 아트워크가 Google Play의 다양한 UI 레이아웃, 폼 팩터 및 기기에 더 자연스럽게 어울리도록 만들 뿐 아니라, Google Play에서 더 developer.and..

[Do it! 프로덕트 디자인 입문 with 피그마]4-4 & 4-5 & 4-6장

애셋 내보내기 하고 피그마에 다시 넣기 Export asset 버튼을 누르면 원하는 폴더로 내보낼 수 있다 폴더를 열어 애셋을 확인해보면 @2x, @3x 이름이 추가된채 내보내기가 된 것을 확인할 수 있다. 피그마창으로 드래그하면 세 파일이 각기 다른 해상도로 피그마 파일에 들어온다. 버전 히스토리 기록하고 복구하기 ctrl+alt+s를 눌러 버전 히스토리를 연 다음 저장할 버저의 문구를 적고 저장한다. ctrl+a와 delete를 눌러 모든 애셋을 지운다. 다시 ctrl+alt+s를 눌러 버전 히스토리를 연 다음 Show full version history를 클릭한다. backup을 찾아 마우스 오른쪽 버튼을 클릭하고 Restore this Version을 선택한 후 done버튼을 누른다. 프로토타입..

[Do it! 프로덕트 디자인 입문 with 피그마]4-1 & 4-2 & 4-3장

프레임의 위치와 크기 패널 조절하기 As Is를 클릭하고 To Be의 X, Y, W, H 값을 입력하면 To Be에 두 레이어가 겹쳐진다. 켜고 끌 수 있는 베리언트 만들기 As Is의 오브젝트를 아래에 복제하고 색생을 회색으로 바꾼 후 varient의 이름을 각각 grey와 red로 바꾼다. 두 오브젝트를 선택한 상태에서 Create component set를 선택해 2개의 컴포넌트를 베리언트로 묶는다. 프로머티명과 옵션명을 다음과 같이 바꾼 클릭 한번으로 red프로퍼티를 켜고 끌 수 있다. 인스턴스 교체하기 Constraints 조절하기 Constraints의 left를 left and right로 바꾸면 이렇게 설정한 사각형은 상위 프레임의 좌우 폭에 맞게 크기가 바뀌게 된다. 그리드 만들기 그리드..

[Do it! 프로덕트 디자인 입문 with 피그마] 3-3 & 3-4장

Layers 레이어 패널에서 레이어를 클릭하면 그룹이나 프레임 등으로 묶인 레이어를 한번에 선택할 수 있다. 가장 안쪽 레이어 선택&순서 바꾸기 컴포넌트와 인스턴스 복제할 수 있는 오브젝트는 보라색으로 표시된다 레이어 잠금 자물쇠 버튼을 누르면 잠긴다 (수정 , 실수로 이동 등등 방지) Page 섹션 +버튼을 눌러 새 페이지를 만들 수 있다. Boolean groups 기본 도형을 합쳐 새로운 도형을 만들 수 있다 Use as mask 필요한 부분만 드러낼 수 있다

[Do it! 프로덕트 디자인 입문 with 피그마] 3-1 & 3-2장

crl을 누르고 오브젝트를 클릭하면 레이어 안쪽의 글자가 선택된다. move와 scale의 차이 move로 프레임의 크기를 조절하면 constraints의 규칙에 따라 요소가 자동으로 배치되는데 scale을 사용하면 constraints를 무시하고 오브젝트의 크기를 줄일 수 있다. 누끼 따기 실습 pen기능을 사용해 빌딩의 테두리를 따라 선을 그린다. Stroke를 Fill로 바꾼다. 마스크 오브젝트를 이미지 아래로 드래그해서 옮기고 이미지와 마스크로 쓸 레이어를 모두 선택했다. 피그마 툴 바 중 반달 모양의 아이콘을 클릭하면 누끼를 딸 수 있다. 일반 레이어를 컴포넌트로 바꾸기 alt를 누른채 오른쪽으로 레이어를 드래그했다. 마우스 오른쪽을 클릭해 Create component를 클릭하였다. 카드 영역..