UI/UX 디자인 새싹사관학교 Day 1

 

안녕하세요! 오늘은 제가 정말 기대했던 새싹 청년취업사관학교 1일차 후기와 함께 새싹은평캠퍼스 와보니 시설도 너무 좋고, 노트북 거치대, 텀블러, 쿠키 등 선물까지 챙겨주셔서 시작부터 기분이 좋더라고요! 심지어 모니터까지 구비되어 있어서 공부하는데 집중할 수 있었어요. (광고아니에요!!)

거치대와 다과

텀블러!!

UI/UX 디자인 공부, 솔직히 막막하게 느껴질 때가 많잖아요? '이론만 주구장창 파다 보면 언제 실전 경험을 쌓지?' 하는 고민 저만 한 거 아니죠? 첫 날 배운 내용들의 핵심 팁들을 정리해 봤어요. 리디자인 시 주의할 점부터 효율적인 디자인 툴 Figma(피그마) 활용법까지 배웠답니다. 핵심만 간략하게 요약해볼게요.

 

1. 성공적인 리디자인을 위한 필수 원칙 🚀

리디자인은 기존 서비스의 불편함을 개선하고 사용자 경험을 획기적으로 향상시키는, 어찌 보면 디자인의 꽃 같은 작업이잖아요. 그런데 무턱대고 시작하면 산으로 갈 수 있어요. 제가 배운 몇 가지 금기 사항과 필수 원칙들을 꼭 기억해 두면 좋답니다. 평소 불편하다고 느꼈거나 관심 있는 분야의 서비스를 정해서 하는 게 정말 중요해요. 무작정 새로운 걸 시도하기보다는, 이미 잘된 사례들을 클론디자인하며 원리를 익히는 것도 좋은 방법이더라고요. 그리고 토스나 당근, 네이버 등 업계에서 너무 잘 된 서비스는 별로 좋지않아요!

💡 알아두세요!
리디자인 프로젝트는 단순히 예쁘게 만드는 것을 넘어, 실제 사용자 불편을 해소하고 서비스의 가치를 높이는 데 초점을 맞춰야 합니다. 단순히 레퍼런스를 따라 하는 것을 넘어, '왜 이렇게 디자인했을까?'를 깊게 고민하는 것이 중요해요.

 

2. Figma 핵심 기능 및 실전 기능 및 단축키 마스터하기 ⌨️

UI/UX 디자이너라면 Figma는 이제 필수 툴이잖아요? 기본적인 드로잉부터 고급 기능까지 숙달해야 작업 효율을 극대화할 수 있답니다. 제가 직접 써보고 유용했던 핵심 단축키와 팁들을 정리해 봤어요.

 

• 기초 연습: 'radius' 같은 기본적인 속성부터 익히고, 자주 사용하는 단축키는 무조건 외우는 게 나중에 시간을 엄청 절약해 줄 거예요.
  
  
• 일러스트에 있는 기능을 피그마에서도!
  
  1.Union Selection (병합)
  • 기능: 두 개 이상의 겹쳐진 도형을 하나의 도형으로 합쳐줍니다. 마치 풀로 붙이듯이, 모든 도형의 윤곽선을 따라 새로운 단일 도형을 생성합니다.
  • 활용: 여러 개의 간단한 도형을 조합하여 복잡한 하나의 아이콘이나 일러스트를 만들 때 유용합니다. 예를 들어, 원 두 개를 합쳐 알약 모양을 만들거나, 사각형과 원을 합쳐 스피치 버블을 만들 수 있습니다.
  2. Subtract Selection (빼기)
  • 기능: 아래에 있는 도형에서 위에 겹쳐진 도형의 영역만큼을 잘라냅니다. 가장 위에 있는 도형이 '칼날' 역할을 한다고 생각하면 이해하기 쉽습니다.
  • 활용: 특정 부분만 파내거나, 구멍을 낼 때 주로 사용합니다. 예를 들어, 사각형에서 원을 빼서 창문 모양을 만들거나, 텍스트에 구멍을 뚫는 효과를 줄 수 있습니다.
  3. Intersect Selection (교차 영역)
  • 기능: 겹쳐진 도형들의 공통된 부분(교차하는 영역)만을 남기고 나머지는 제거합니다.
  • 활용: 두 도형이 겹치는 부분의 형태를 얻을 때 사용합니다. 예를 들어, 두 개의 원이 겹쳐진 영역을 활용하여 잎사귀 모양을 만들거나, 특정 패턴을 만들 때 유용합니다.
  4. Exclude Selection (제외)
  • 기능: 겹쳐진 도형들 중에서 공통된 부분(교차 영역)을 제외한 나머지 부분만을 남깁니다. Union과 반대로, 겹치는 부분만 사라진다고 생각하면 됩니다.
  • 활용: 복잡한 내부 구멍이나 특이한 형태를 만들 때 사용합니다. 예를 들어, 두 개의 원이 겹쳤을 때 가운데 겹치는 부분만 비어 있는 도넛 모양을 만들 수 있습니다.
  5. Flatten Selection (병합 및 평면화)
  • 기능: 선택된 모든 도형들을 하나의 단일 벡터 레이어로 병합하고 평면화합니다. Union과 비슷하게 합치지만, Flatten은 도형이 가지고 있던 개별적인 편집 가능 속성(예: 텍스트 레이어가 텍스트로 수정되는 기능)을 잃고 단순히 패스 아웃라인으로 변환됩니다. 즉, 더 이상 개별 구성 요소를 수정할 수 없게 됩니다.
  • 활용: 도형의 편집이 더 이상 필요 없을 때, 파일 용량을 줄이거나 다른 소프트웨어로 내보낼 때 사용합니다. 특히 아이콘 작업 시 최종 형태로 확정하고 더 이상 수정할 필요가 없을 때 유용하게 쓰입니다. 한 번 Flatten된 도형은 되돌리기 어렵기 때문에 신중하게 사용해야 합니다.
    

실습내용

실전 단축키 & 팁

• Shift + X: 선(Stroke)과 채우기(Fill)를 빠르게 전환! 진짜 유용해요.
• Ctrl + [ 또는 ]: 레이어를 뒤로/앞으로 보내는 단축키! 레이어 정리할 때 최고예요.
• Ctrl + Alt + O: 선택한 객체를 아웃라인 스트로크(Outline Stroke)로 변환! 깔끔한 작업의 기본이죠.
• Alt + Shift + S: Substract 기능을 통해 깔끔하게 도형을 뺄 수 있어요.
• Ctrl + E: 여러 지저분한 클릭들을 한 번에 정리해서 깔끔하게 `만들어주는 마법의 키!
• Opacity (투명도): 숫자 키를 눌러서 빠르게 투명도를 조절할 수 있어요 (예: 1 누르면 10%, 5 누르면 50%).Stroke 설정: 선의 끝점을 둥글게 (round) 처리해서 부드러운 느낌을 주는 센스!
• Arc 조절: Shift를 누른 채 Arc를 조절하면 비례에 맞춰 크기가 변해요.
• 중앙 정렬: Alt + H를 누르면 가로 가운데 정렬! 제 최애 단축키 중 하나예요.
• 편집 모드: 객체 클릭 후 Enter를 누르면 바로 편집 모드로 진입!
• Shift + Alt 활용: 원을 만들 때 Shift + Alt를 동시에 누르면 중심을 기준으로 정비율로 커져요.

3. 글래스모피즘(Glassmorphism) 구현하기 ✨

최근 UI/UX 디자인 트렌드 중 하나가 바로 글래스모피즘이잖아요? 투명하고 흐릿한 유리 효과를 줘서 세련된 느낌을 주는 기법인데, 피그마로 쉽게 구현할 수 있답니다.

왼) 실습 오) 멜론

 

• Backgound Blur: 글래스모피즘 구현의 핵심은 바로 Backgound Blur 기능이에요. 이걸 잘 활용하는 게 관건!
• Uniform vs. Progressive: Backgound Blur 옵션 중에 Uniform은 전체적으로 균일하게 블러를 적용하고, Progressive는 블러의 방향을 조절할 수 있어서 더 섬세한 표현이 가능해요. 멜론 앱의 이미지를 참고해서 실습해 보면 '아하!' 하고 바로 이해가 되실 거예요.

Uniform과 progressive

💡 팁!
글래스모피즘은 배경 이미지나 색상 위에 적용했을 때 그 효과가 극대화됩니다. 투명도와 블러 값을 적절히 조절하여 원하는 분위기를 연출해 보세요!

 

 

글의 핵심 요약 📝

새싹 청년취업사관학교 1일차는 저에게 정말 알찬 시간이었어요. 특히 UI/UX 디자이너로서 실력을 키우기 위해 어떤 점에 집중해야 할지 명확한 가이드라인을 얻을 수 있었답니다. 오늘 다룬 핵심 내용들을 다시 한번 정리해 볼게요!

1. 성공적인 리디자인: 문제 분석과 모작 연습이 중요
2. Figma 숙련: Shift + X, Ctrl + Alt + O, Ctrl + E 등 핵심 단축키 마스터와 투명도, 스트로크, Arc 조절 등 기본 기능 숙달이 작업 속도를 높여줍니다. 아이콘 직접 만들기도 좋은 연습이 돼요.
3. 글래스모피즘 구현: Backgound Blur가 핵심이며, Uniform과 Progressive 옵션을 이해하고 적절히 활용하여 세련된 유리 효과를 연출하는 것이 중요해요.

 

자주 묻는 질문 ❓

Q: UI/UX 리디자인 시 가장 중요한 원칙은 무엇인가요?

A: 리디자인은 단순히 예쁘게 만드는 것을 넘어, 기존 서비스의 불편함을 명확히 파악하고 사용자 경험을 향상시키는 데 초점을 맞춰야 해요. 문제 정의가 가장 중요하답니다! 그리고 잘된 사례를 모작하면서 원리를 익히는 것도 큰 도움이 됩니다.

 

Q: Figma의 Opacity(투명도)는 어떻게 조절하나요?

A: Figma에서는 선택한 객체의 투명도를 숫자 키를 눌러서 빠르게 조절할 수 있습니다. 예를 들어, 1을 누르면 10%, 5를 누르면 50%, 0을 누르면 0% (완전 투명)가 되는 식이에요. 아주 직관적이고 편리하답니다!

새싹 청년취업사관학교에서의 첫날은 정말 알찬 시간이었어요. 시설도 좋고 지원도 아낌없어서 앞으로의 학습이 더 기대됩니다! UI/UX 디자이너의 길을 걷고 계시거나 이제 막 시작하려는 분들께 오늘 제가 정리한 팁들이 조금이나마 도움이 되었으면 좋겠네요. 더 궁금한 점이 있다면 언제든지 댓글로 물어봐 주세요~ 우리 모두 멋진 디자이너로 성장해요!