[1주차] WIL (Weekly I learned)

1주차 피그마

database

​

1. 피그마 인터페이스 및 기본 도구:

캔버스(Canvas): 디자인 작업을 수행하는 메인 작업 영역.

도구바(Toolbar): 기본 도구들이 위치한 곳. 선택 도구, 그리기 도구 등이 있다.

레이어 리스트(Layers List): 요소들의 계층 구조를 보여주는 패널.

프로퍼티 패널(Properties Panel): 선택한 요소에 대한 속성을 편집할 수 있는 곳.

우측 사이드바(Right Sidebar): 페이지, 협업 기능, 히스토리 등이 있는 영역.

​

성공 과정: 기본 도구를 사용하여 간단한 디자인 프로젝트를 진행하고, 그로부터 피드백을 받아 개선하는 과정을 통해 실력을 향상시킨다.

​

2. 피그마의 플러그인과 커뮤니티:

플러그인(Plugins): 추가 기능을 통해 피그마의 기능을 확장할 수 있다. 예를 들어, 디자인 시스템 생성, 데이터 동기화 등이 가능하다.

커뮤니티(Community): 피그마 사용자들 간에 아이디어, 리소스, 템플릿 등을 공유하는 플랫폼.

성공 과정: 플러그인을 사용하여 프로젝트에 필요한 기능을 추가하고, 커뮤니티에서 피드백을 주고받아 자신의 디자인을 발전시킨다.

​

3. 텍스트 및 컬러 스타일 지정:

텍스트 스타일(Text Styles): 디자인에 자주 사용되는 텍스트 스타일을 미리 정의해두고 재사용 가능. 일관된 디자인을 유지할 수 있다. 컬러 스타일(Color Styles): 프로젝트에서 사용되는 주요 컬러를 정의하고, 일관된 컬러 팔레트를 유지한다.

성공 과정: 프로젝트에서 텍스트 및 컬러 스타일을 정의하고, 이를 활용하여 여러 페이지나 섹션에서 일관된 디자인을 적용한다.

​

4. 피그마 사용 팁:

자동 레이아웃(Auto Layout): 요소들을 자동으로 정렬하고 크기를 조절하는 기능을 활용하여 디자인을 효율적으로 관리.

프레임 활용(Frame): 프레임을 사용하여 페이지, 섹션 등을 구성하고, 관련된 요소들을 그룹화하여 작업의 구조를 잡는다.

성공 과정: 프로젝트의 복잡성에 따라 자동 레이아웃과 프레임을 활용하여 디자인을 구조화하고, 효율적으로 작업하는 방법을 연구한다.

​

5. 작업 흐름 예시:

기획 단계: 커뮤니케이션과 아이디어 공유를 위해 피그마에서 협업하고 커뮤니티에서 피드백 수렴.

디자인 단계: 텍스트 스타일 및 컬러 스타일을 정의하고, 이를 활용하여 프레임과 자동 레이아웃을 활용하여 디자인 작업.

개발 단계: 피그마에서 생성된 디자인 스펙을 공유하고, 플러그인을 통해 코드 생성 등의 작업을 진행.

성공 과정: 피그마를 사용하여 프로젝트를 기획, 디자인, 개발 단계로 나누고, 각 단계에서의 작업 흐름을 조율하여 프로젝트를 성공적으로 완료한다.​

2주차 피그마

database

1. 오토레이아웃 활용:

이점: 크기에 따라 유연하게 반응하는 디자인을 구현하여, 다양한 디바이스나 화면 크기에 대응할 수 있다.

활용 방법: 오토레이아웃을 설정하여 요소들 간의 관계를 정의하고, 그에 따라 크기 및 위치를 조절하여 자동으로 반응형 디자인을 만든다.

성공 과정: 간단한 프로젝트부터 시작하여 오토레이아웃을 적용하며, 다양한 디바이스에서 어떻게 보여지는지 확인하고 개선하는 경험 쌓기.

​

2. 피그마의 컴포넌트 기능:

이점: 디자인 요소들을 재사용 가능한 컴포넌트로 정의하여 일관성 있는 디자인을 유지하고, 수정이 필요한 경우 한번에 적용할 수 있다.

활용 방법: 디자인 요소를 선택하고 '컴포넌트'로 정의하여 라이브러리에 추가하고, 필요에 따라 수정이 가능한 인스턴스로 활용한다.

성공 과정: 자주 사용되는 요소들을 컴포넌트로 정의하고, 이를 라이브러리에 추가하여 프로젝트 전체에서 활용하는 방법을 익히기.

​

3. 컴포넌트와 인스턴스의 차이:

컴포넌트: 디자인 요소를 일종의 템플릿으로 정의한 것. 라이브러리에 추가하고, 수정이 필요한 경우 한번에 적용 가능.

인스턴스: 컴포넌트의 실제 사용본. 컴포넌트를 기반으로 만들어지며, 독립적으로 수정이 가능하다.

성공 과정: 컴포넌트와 인스턴스의 차이를 이해하고, 필요한 경우에 따라 수정이 용이한 방식으로 디자인 구성하기.

​

4. 재사용 가능한 공통 요소 관리:

이점: 컴포넌트를 효과적으로 활용하여 공통된 UI 요소들을 한 곳에서 관리하고 수정할 수 있다.

활용 방법: 컴포넌트 라이브러리를 구축하여, 버튼, 헤더, 폼 등과 같은 공통 요소들을 효율적으로 재사용하고 유지보수한다.

성공 과정: 컴포넌트 라이브러리를 구축하고, 공통 요소들을 효과적으로 관리하며 프로젝트의 일관성 유지하기.

​

5. 작업 흐름 예시:

오토레이아웃 적용: 화면의 크기에 따라 자동으로 조절되는 디자인을 설정하여 반응형 디자인을 완성한다.

컴포넌트 활용: 공통된 요소들을 컴포넌트로 정의하고, 라이브러리에 추가하여 프로젝트 전체에서 재사용한다.

인스턴스 관리: 각각의 인스턴스를 독립적으로 수정하고, 필요에 따라 컴포넌트를 업데이트하여 일관된 디자인을 유지한다.

느낀점 / 스스로에게 아쉬웠던 점

처음 접하는 프로그램 툴 작업이라 아직은 피그마 작업이 어색하기만 하지만 매일 조금씩이라도 피그마를 다루며 기초 작업을 반복 연습하면 손에 익숙해 질 수 있을것 같다.

처음 사전 캠프 진행에 의심을 가졌는데 기초 작업을 통해 피그마 도구에 대한 이해가 깊어지면 본 강의 시작 후 도움이 될 것 같다.

곧 있으면 여러가지 프로젝트를 할 텐데 시간이 부족하고 더 시간을 효율적으로 써야봐 할 거 같다.

제대로 공부 할 시간이 지금 밖에 없는 거 같아서 정리도 열심히 해 필요한 정보를 필요할 때 찾을 수 있어야 할 거 같다.

FACTS(사실, 객관) : 이번 일주일 동안 있었던 일, 내가 한 일

성공	​
실수	​

FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌

성공	​
실수	​

FINDINGS(배운 것,결과) : 그 상황으로부터 내가 배운 것, 얻은 것

성공	​
실수	​

FUTURE(미래) : 배운 것을 미래에는 어떻게 적용할 지

성공	​
실수	​