Week 2
2024.10.30(Wed)
- 점편집,이펙트,익스포트,테마변경
2024.11.01(Fri)
- 플러그인
2024.11.04(Mon)
- 오토레이아웃, 단축키
4일차(2024.10.01)
개념 정리
점편집
벡터 객체의 개별 점과 곡선을 조정하여 모양을 세밀하게 수정할 수 있는 기능
점편집 기능과 둥근 모서리
이펙트(effect)
시각적 효과를 객체에 적용하여 디자인에 깊이와 질감을 추가하는 기능
- Inner shadow : 객체 내부에 그림자를 적용하여 요소가 눌린 듯한 효과를 줌
- Drop shadow : 객체 외부에 그림자를 생성하여 3D 효과를 주고 배경에서 요소를 돋보이게 함
- Layer blur : 객체의 경계를 흐리게 하여 특수 효과를 만들거나 요소에 익명성을 부여
- Background blur : 선택한 객체 뒤의 모든 요소에 블러 효과를 적용하여 특정 부분에 집중도를 높임
익스포트(export)
디자인의 전체 또는 일부를 다양한 이미지 형식(PNG, JPG, SVG 등)으로 내보내는 기능
해상도 설정:
- 1x: 원본 크기로 내보내기. 주로 웹용 이미지에 사용
- 2x: 원본 크기의 2배로 내보내기. 고해상도 디스플레이나 Retina 디스플레이 대응용으로 사용
- 3x: 원본 크기의 3배로 내보내기. 주로 모바일 앱 개발에서 사용
- ! 특정 크기로 내보내야 할 때(웹사이트 로고나 앱 아이콘 등 정확한 크기가 요구할 시)
- "512w": 너비(width)가 512px
-"512h": 높이(height)가 512px
파일 형식:
- PNG: 투명도를 지원하는 래스터 이미지 형식. 웹 그래픽에 적합합니다24.
- JPG: 압축률이 높은 래스터 이미지 형식. 사진이나 복잡한 이미지에 적합합니다24.
- SVG: 벡터 그래픽 형식. 크기 조절이 가능하며 아이콘이나 로고에 적합합니다24.
- PDF: 여러 페이지를 포함할 수 있는 문서 형식. 프레젠테이션이나 인쇄용 문서에 적합합니다
테마 변경
피그마 인터페이스의 밝은 모드와 어두운 모드를 전환
과제
요구사항
- 점편집, 둥근 모서리 기능을 활용하여 로고와 심볼, 아이콘을 제작해볼것
- effect를 활용하여 뒷배경을 적용해볼것
실습 과정
아직도 익숙치 않은 점편집 기능
동일한 사진을 가져오려했는데 예제 사진은 blur 배경에 가려져있어서 급하게 가져온 다른 사진
결과 및 회고
결과
회고
기능적인 부분은 빠르게 작업했지만, 분위기에 맞는 적절한 사진을 찾는 게 예상보다 어려웠다. 예제 사진을 캡처해 사용하려 했지만 해상도가 많이 깨져서, 비슷한 분위기의 다른 사진을 찾기 위해 최대한 노력했다.
빠르게 완성한 후 다른 분들의 과제도 살펴보았는데, 동일한 방식으로 작업하신 분들도 있었지만, 본인만의 개성을 살려 더욱 보기 좋게 디자인하신 분들도 있어 인상적이었다. 단순히 배운 기능을 사용하는 것만이 아니라, 그 안에서 자신만의 디자인 스타일을 살려 과제를 해보는 것도 하나의 업그레이드라고 느꼈다. 주어진 과제를 넘어서 어떻게 더 개선할 수 있을지를 고민하는 것이 나 자신을 성장시키는 중요한 전략임을 새삼 깨달았다.
5일차(2024.11.01)
개념 정리
플러그인(plug-in)
외부 개발자들이 만든 추가 기능으로, 피그마의 기본 기능을 확장하고 작업 흐름을 개선하는 도구
플러그인 사용방법
| 툴바 플러그인 | 커뮤니티 플러그인 |
|---|---|
 |  |
플러그인 리스트
- Unsplash : 이미지 서칭
- Feather icon : 아이콘(다양하지만, 정재되지 않음)
- Iconfy : 아이콘(일관되어있지만, 적은수)
- Lorem ipsum : 더미텍스트 (랜덤문장생성)
- Flowchart : 플로우차트 제작
- Remove BG : 뒷배경 삭제 - API key를 받아오면 피그마 내부에서 플러그인 실행 가능
과제
요구사항
실습 과정
프로필 캐릭터 제작 시 기존 디자인과 유사하게 하려다가 커스터마이징을 해봤다(왼 : 커스터마이징(나) / 오 : 원래 디자인)
unsplash를 활용하여 예제와 유사한 더 예쁜 자연 풍경을 배치
비행기 아이콘 중 예제와 맞는 사진이 없어 iconfy에서 유사한 아이콘을 찾아 점으로 직접 편집
강사님께 피드백을 받을 때 저 align 부분을 잘 맞춰줘야한다는 조언을 받았다.
결과 및 회고
결과
회고
플러그인을 많이 안다고 생각했는데, 막상 모르는 플러그인이 많다는 걸 깨달았다. 정확히 말하자면, 플러그인 구동 방법을 잘 몰랐던 것 같다. 예를 들어, 배경 제거 플러그인인 remove.bg는 항상 웹에서만 사용했는데, API Key를 받아 플러그인으로 구동하면 웹보다 훨씬 깔끔하게 배경을 제거할 수 있다는 점이 다소 충격적이었다.
점 편집 기능은 할수록 익숙해지는 것 같다. 이번엔 과제 작업을 하며 프로필 캐릭터를 커스터마이징해보았는데, 조금 더 개성을 살려보지 못한 부분이 아쉽긴 하지만 기본 형태를 유지하면서도 나름의 개성을 표현했다는 점에서 만족한다.
한 가지 아쉬웠던 점은 강사님께서 대부분의 분들께 Text Alignment에 대한 피드백을 주셨지만, 왜 그 부분이 중요한지에 대한 설명이 부족했던 것이다. 그래도 한분 한분께 일일이 피드백을 주시는 게 궁금했는데, 강사님께서 각자의 과제에 집중하다 보면 다른 분들의 피드백을 듣기 어려울 수 있어 개별적으로 설명해주신다고 하셨다. 강사님의 세심함에 내심 감동을 받았다.
6일차(2024.11.04)
개념 정리
오토 레이아웃
여러 해상도에서도 뷰(View) 가 알맞는 화면을 출력할 수 있도록 조건을 걸어 자동으로 크기와 위치를 맞춰 배치하는 기능
단축키
화면 상단 help -> keyboard shortcut 클릭 시 화면 하단에서 단축키 리스트 확인 가능
과제
요구사항
- 오토 레이아웃을 활용하여 디자인할 것
실습 과정
결과 및 회고
결과
회고
오토 레이아웃을 만드는 것은 어렵지 않았지만, 이미지나 이모티콘 소스를 찾는 작업이 늘 쉽지 않다. 기존 이미지나 그림보다 더 나은 것을 찾으려다 보니 신중하게 고르게 되고, 시간이 걸리는 것 같다. 우리 팀원 중 피그마를 배우고 있는 분들은 오토 레이아웃을 어려워하시는 게 느껴졌는데, 그런 부분들을 설명해 주면서 내가 이 기능을 제대로 이해하고 있음을 다시 한번 체감할 수 있었다.
나는 피그마의 단축키를 일일이 찾아가며 익혔는데, 단축키를 한 번에 볼 수 있는 기능이 있다는 것을 처음 알았을 때 살짝 충격이었다. 피그마를 처음 배울 때 알았다면 더 쉽게 익혔을 것 같기도 하지만, 피그마 기능을 잘 다룰 수 있게 된 지금이야말로 단축키의 진가를 제대로 활용할 수 있는 시점이라 생각한다. 앞으로 단축키를 더 적극적으로 사용하면서 피그마 작업 속도가 한층 빨라질 것을 기대하고 있다.
본 후기는 [스나이퍼팩토리x웅진씽크빅] UX/UI 실무 초격차 디자인 전문가 양성과정 (B-log) 리뷰로 작성 되었습니다.
#UXUI디자인전문가양성과정 #UXUI교육과정 #서울시청년취업사관학교 #새싹동대문캠퍼스 #SeSAC #스나이퍼팩토리 #웅진씽크빅 #UXUI디자이너 #디자이너교육 #디자이너인턴
