이번 한 주 동안 피그마 기초 수업을 들으며 많은 걸 배웠다. 처음 다뤄보는 툴이라 많이 헤매고 어려웠지만, 다행히 재밌는 점도 알게 되어 흥미가 점점 붙은 한 주였다. 새로운 것을 배우는 과정은 언제나 쉽지 않지만, 익숙해지는 순간이 오면 성취감도 크다. 특히 프로토타입을 만들면서 기술 발전의 속도를 온몸으로 실감하는 계기가 되었다.

가장 충격적이었던 건 대학 시절에 사용했던 툴과 피그마의 엄청난 기술적 차이를 직접 경험한 순간이었다. 약 17년 전에 대학 수업에서 처음 접했던 디자인 툴과 비교하면, 마치 다른 세상처럼 느껴졌다. 그때는 정적인 디자인이 대부분이었고, 기능도 제한적이어서 한 화면을 만들 때도 많은 과정과 시간이 필요했다. 하지만 지금은 피그마 하나만으로 디자인뿐만 아니라 프로토타이핑까지 가능한 시대가 되었다.

그때 배웠던 기술들이 지금은 거의 쓰이지 않는다는 걸 깨닫자, 한편으론 격세지감을 느끼면서도 또 한편으론 긴장도 되었다. 내 배움이 20년 가까이 단절됐다가 다시 이어지는 거니까 신선하면서도 ‘과연 내가 잘 따라갈 수 있을까?’ 하는 불안감이 스며들었다. 기술의 수명이 점점 짧아지고, 끊임없이 새로운 것을 배워야 하는 시대에서 뒤처지지 않기 위해서는 무엇보다도 변화에 대한 두려움을 극복해야 한다는 생각이 들었다.

그럴 때마다 내가 존경하는 분이 했던 말이 떠올랐다. "당장에 무엇이 나한테 와서 닿는 것이 없다 할지라도 그 변화가 중요하다는 점을 항상 응원해야 한다." 이 말이 요즘 따라 더욱 깊이 와닿는다. 지금 당장은 익숙하지 않고 어렵게 느껴질지라도, 계속해서 변화하는 세상을 응원하고 그 흐름에 올라타려는 태도가 중요하다는 뜻이다. 내가 아무리 열심히 배운 내용도 생각보다 빠르게 쓸모없어질 수도 있다. 하지만 중요한 건 그럼에도 불구하고 계속 배우고 성장하기 위해 노력하는 태도다. 변화는 막을 수 없지만, 변화를 두려워하지 않는 건 내 선택에 달려 있다.

이제 오전 10시부터 다시 수업이 시작된다. 오늘도 새로운 개념을 배우고, 익숙해지기까지 헤매는 순간이 오겠지만 그 또한 성장의 일부일 것이다. 분명 처음 접하는 개념들이 어렵게 다가올 수도 있고, 오늘도 시행착오를 겪겠지만, 이런 과정이 쌓여 결국 내 것이 될 거라 믿는다. 가끔은 속도가 느리다고 느껴질 수도 있고, 제대로 이해하지 못하는 순간이 올 수도 있겠지만, 중요한 건 포기하지 않는 것이다.

배움의 과정은 길고 끝이 없지만, 그 길을 즐기면서 가보려고 한다. 지금 당장 완벽하지 않아도 괜찮다. 앞으로도 계속 성장할 기회가 있고, 내가 배우려는 의지만 있다면 언젠가 익숙하게 다룰 수 있는 날이 올 것이다. 그러니 조급해하지 않고 차근차근 배워가자. 오늘도 최선을 다해서 한 걸음 더 나아가 보자. 화이팅!

1. 인터랙션 설정하는 방법

1) 버튼 클릭 시 다른 화면으로 이동하기

  • 버튼을 선택한 상태에서 Prototype 탭을 클릭
  • 버튼에서 드래그하여 연결할 프레임(페이지)로 이동
  • Interaction Details에서
    • Trigger: On Click
    • Action: Navigate To
    • Animation: Smart Animate or Instant 선택

2) 오버(hover) 효과 적용하기

  • 버튼을 선택하고 Prototype 탭으로 이동
  • 버튼을 다른 프레임(호버 상태)과 연결
  • Interaction Details에서
    • Trigger: While Hovering
    • Action: Change To
    • Animation: Smart Animate 적용

3) 모달 팝업 열고 닫기

  • 팝업(모달) 프레임을 만들어 숨겨둠
  • 버튼을 선택 후 Prototype 탭에서 모달 프레임과 연결
  • Interaction Details에서
    • Trigger: On Click
    • Action: Open Overlay
    • Overlay: Center로 설정 (위치 조정 가능)
    • Close when clicking outside 옵션 체크

4) 드래그 인터랙션 설정하기

  • 드래그할 요소를 선택
  • Prototype 탭에서 드래그 후 연결할 프레임으로 이동
  • Interaction Details에서
    • Trigger: On Drag
    • Action: Navigate To or Smart Animate
    • Easing: Ease Out 또는 Linear 선택

2. 딤드 처리하는 방법

1) 팝업 창에 딤드 배경 추가하기

  • 팝업 창 뒤에 새로운 프레임(사각형)을 추가
  • 배경색을 블랙 (#000000) 또는 다크 그레이로 설정
  • Opacity (투명도)를 30~50%로 조정하여 반투명한 느낌으로 만들기
  • 팝업 창과 함께 그룹화하여 관리

2) 딤드 배경을 클릭하면 팝업 닫기

  • 딤드 배경을 선택 후 Prototype 탭에서 연결할 프레임 설정
  • Interaction Details에서
    • Trigger: On Click
    • Action: Close Overlay

3) 딤드 애니메이션 효과 추가하기

  • 딤드 배경과 팝업을 Smart Animate로 설정
  • Fade In / Fade Out 효과를 적용하여 부드럽게 등장하도록 연출

3. 플로우 경로(Prototype 연결선)가 안 보일 때 해결 방법

1) Prototype 연결이 사라진 경우

  • Prototype 탭에서 버튼을 클릭했을 때 연결선이 없는지 확인
  • 연결이 안 되어 있다면 다시 드래그하여 프레임과 연결

2) Prototype 탭이 비활성화된 경우

  • 상단에서 Design → Prototype 탭이 선택되어 있는지 확인
  • Prototype 탭이 비활성화된 경우 다시 활성화

3) Flow(시작 프레임)가 설정되지 않은 경우

  • 프로토타입에서 시작 프레임을 설정해야 플로우가 표시됨
  • 시작할 프레임을 선택 후 **"Set as Starting Frame"**을 클릭

4) Prototype 연결선이 가려진 경우

  • 확대/축소 비율을 조정하여 연결선이 보이는지 확인
  • 레이어가 많을 경우 다른 요소가 연결선을 가릴 수 있으므로 레이어 순서를 조정

5) 플로우가 표시되지 않는 경우

  • View 옵션에서 "Show Prototype Connections"가 활성화되어 있는지 확인
  • Ctrl + Shift + P (Mac: ⌘ + Shift + P) 를 눌러 Prototype 플로우를 다시 표시

 

Figma 실습 링크: https://www.figma.com/design/p5gz3PylSi1OuUe2zbSQUx/PD_03_%EA%B0%95%EC%86%8C%EC%97%B0?node-id=224-2538&p=f&t=4h5VcUDt8EdYu6A2-0

 


 

디자인 레퍼런스 만들기 / 나만의 디자인 시스템 만들기

 

 

Figma 실습 링크: https://www.figma.com/design/p5gz3PylSi1OuUe2zbSQUx/PD_03_%EA%B0%95%EC%86%8C%EC%97%B0?node-id=242-11991&p=f&t=4h5VcUDt8EdYu6A2-0

 

 

 

 

Figma 실습 링크: https://www.figma.com/design/p5gz3PylSi1OuUe2zbSQUx/PD_03_%EA%B0%95%EC%86%8C%EC%97%B0?node-id=149-2&p=f&t=dpteoCF6Ax4Y69Df-0

 


 

 

🎨 Figma에서 마스크(Mask) 기능 활용법

마스크(Mask) 기능은 특정 이미지나 개체를 원하는 모양으로 잘라내거나 제한된 영역만 보이게 하는 기능임. 포토샵의 클리핑 마스크처럼 동작한다고 보면 됨.


1. 기본적인 마스크 적용 방법

📌 기본 마스크 만들기

  1. 마스크할 이미지 또는 개체 준비
    • 먼저 마스크를 적용할 이미지(또는 벡터 개체)를 추가함.
  2. 마스크 형태가 될 개체 준비
    • 마스크할 도형(Shape) 또는 벡터 개체를 추가함.
    • 예를 들어 원을 만들면 이미지가 원 형태로 잘려 보이게 됨.
  3. 두 개체를 선택한 후 "Mask" 적용
    • 마스크할 개체(이미지) + 마스크 형태(도형)를 함께 선택함.
    • Ctrl + Shift + M (Mac: ⌘ + Shift + M) 또는 우클릭 → "Use as Mask" 선택.
  4. 마스크 그룹이 생성됨
    • Layers 패널에서 마스크가 적용된 그룹이 만들어지고, 도형이 마스크 역할을 하게 됨.

2. 마스크된 이미지 조정하기

📌 마스크 안의 이미지 이동하기

  1. 마스크 그룹을 선택한 후, 내부에 있는 이미지를 개별적으로 선택함.
  2. Ctrl (Mac: ⌘)을 누른 채 이미지를 드래그하여 위치 조정함.
  3. 크기 조절도 가능하므로 원하는 영역이 정확하게 보이도록 조절할 수 있음.

3. 마스크를 벡터 쉐이프와 함께 사용하기

📌 펜 툴을 이용한 자유로운 마스킹

  1. P를 눌러 **Pen Tool(펜 툴)**을 활성화함.
  2. 원하는 형태로 벡터 쉐이프를 만듦.
    • 예를 들어, 복잡한 곡선 모양으로도 마스크 가능함.
  3. 마스크할 이미지와 벡터 쉐이프를 함께 선택 후 Ctrl + Shift + M (Mac: ⌘ + Shift + M)을 눌러 마스크 적용.

💡 Tip: 벡터를 마스크로 사용하면 곡선, 비정형 모양의 마스크를 만들 수 있음.


4. 마스크 해제 및 수정

📌 마스크 해제

  • 마스크된 그룹을 선택한 후, Ctrl + Shift + G (Mac: ⌘ + Shift + G)를 눌러 그룹 해제할 수 있음.
  • 또는 Layers 패널에서 마스크 개체를 삭제하면 원래 상태로 돌아감.

5. 마스크와 클리핑 콘텐츠 차이

Mask (마스크) 특정 모양을 기준으로 내부 콘텐츠를 가리는 역할을 함
Clip Content (클리핑 콘텐츠) 프레임(Frame) 내부의 요소를 프레임 크기 내에서만 보이게 제한함
  • Frame을 사용할 경우 Clip Content 옵션을 체크하면 마스크 없이도 프레임 영역만 보이도록 제한할 수 있음.
  • 하지만 복잡한 형태로 자르려면 마스크 기능이 더 유용함.

 


 

🌐 크롬에서 개발자 도구(검사)를 활용한 이미지 다운로드 방법

크롬에서 **우클릭 → 검사(개발자 도구)**를 활용하여 페이지의 이미지 소스를 찾고 다운로드하는 방법을 단계별로 정리함.


1. 기본적인 우클릭 다운로드

  1. 크롬에서 원하는 페이지를 엶.
  2. 다운로드할 이미지를 **우클릭 → "이미지를 다른 이름으로 저장"**을 선택.
  3. 원하는 위치에 저장.

⚠️ 일부 웹사이트에서는 우클릭을 막아두거나, 이미지를 백그라운드에서 로드하는 경우가 있음.
이럴 때는 개발자 도구(DevTools)를 활용해야 함.


2. 개발자 도구(검사)에서 직접 다운로드

📌 1️⃣ 이미지 URL 찾기

  1. 크롬에서 원하는 웹페이지를 열고 F12 또는 Ctrl + Shift + I (Mac: ⌘ + Option + I)를 눌러 개발자 도구(DevTools) 실행.
  2. Elements (요소) 탭으로 이동한 뒤, Ctrl + Shift + C (Mac: ⌘ + Shift + C)를 눌러 화면에서 이미지 부분을 클릭하면, 해당 요소가 자동 선택됨.
  3. <img> 태그를 확인하고 src 속성 값을 찾음.
  4. src="..."에 있는 이미지 URL을 복사한 후, 새 탭에서 열어 다운로드.

📌 2️⃣ 네트워크 패널에서 이미지 파일 직접 찾기

💡 이 방법은 이미지가 동적으로 로드될 때 유용함.

  1. 개발자 도구(DevTools)에서 "Network" (네트워크) 탭으로 이동.
  2. **페이지를 새로고침 (F5 또는 Ctrl + R)**하면 페이지에 로드된 모든 파일 목록이 나타남.
  3. 필터를 **"Img"**로 변경하면, 웹사이트에서 로드된 이미지 파일들만 확인 가능.
  4. 원하는 이미지의 URL을 우클릭 → "Open in new tab" (새 탭에서 열기).
  5. 새 탭에서 **우클릭 → "이미지를 다른 이름으로 저장"**하여 다운로드.

3. 전체 페이지 이미지 한 번에 다운로드

📌 1️⃣ 개발자 도구 콘솔에서 자동 추출

웹사이트의 모든 이미지 URL을 한 번에 찾으려면 콘솔에서 아래 코드를 실행하면 됨.

  1. 개발자 도구(DevTools)에서 "Console" (콘솔) 탭 선택.
  2. 아래 코드를 입력하고 실행 (Enter):
  3. javascript
    복사편집
    const images = document.querySelectorAll('img'); images.forEach(img => console.log(img.src));
  4. 출력된 이미지 URL을 복사해서 다운로드하면 됨.

4. 마우스 우클릭 없이 다운로드 (이미지 보호 사이트)

일부 사이트에서는 우클릭이 막혀 있을 수도 있음.
이럴 경우 다음 방법을 활용할 수 있음.

📌 1️⃣ 개발자 도구를 활용하여 다운로드

  • F12 (Mac: ⌘ + Option + I)를 눌러 개발자 도구 실행 후, 위에서 설명한 Elements 탭 또는 Network 탭을 활용하면 됨.

📌 2️⃣ 브라우저 확장 프로그램 활용

개발자 도구 사용이 어렵다면, 확장 프로그램을 설치하여 쉽게 다운로드할 수도 있음.

추천 확장 프로그램:

  1. Image Downloader (https://chromewebstore.google.com/detail/image-downloader-save-pic/daeljdgmllhgmbdkpgnaojldjkdgkbjg?utm_source=ext_app_menu)
  2. Fatkun Batch Download Image
  3. Download All Images

설치 후, 웹페이지에서 실행하면 한 번에 모든 이미지 다운로드가 가능함.


🚀 결론

  1. 간단한 경우 👉 우클릭 → 이미지 저장
  2. 이미지 URL 확인 👉 개발자 도구 Elements 탭에서 <img> src 확인
  3. 동적 이미지 👉 개발자 도구 Network 탭에서 필터 "Img" 사용
  4. 전체 이미지 URL 수집 👉 Console에서 JavaScript 코드 실행
  5. 보호된 사이트 👉 브라우저 확장 프로그램 사용

 

 

 

 

오늘은 피그마에서 부모 컴포넌트와 자식 컴포넌트를 배웠다. 설명을 들을 때는 이해한 것 같았는데, 직접 해보니 전혀 다른 이야기였다.

처음엔 부모와 자식 컴포넌트의 개념 자체가 생소했다. 부모 컴포넌트는 기본이 되는 디자인 요소로, 이를 기반으로 여러 개의 자식 컴포넌트가 생성된다. 부모를 수정하면 자식 컴포넌트에도 동일한 변화가 반영되지만, 자식 컴포넌트에서 특정 부분만 따로 변경하려고 하면 생각보다 쉽지 않았다. 원래 의도한 대로 조작이 되지 않거나 예상치 못한 결과가 나오면 다시 원인을 찾아야 했는데, 그 과정이 쉽지 않았다.

특히 컴바인 베리언츠를 배우면서 더 복잡해졌다. 컴바인 베리언츠를 활용하면 하나의 컴포넌트에서 속성 값을 변경해 다양한 변형을 줄 수 있는데, 개념적으로는 이해가 되지만 막상 적용하려니 생각처럼 되지 않았다. 한 컴포넌트에서 여러 가지 상태를 설정하고, 이를 변형해가며 활용하는 과정이 익숙하지 않아서 몇 번이고 시도해 봤다. 챗GPT로 검색하고, 공식 문서를 찾아보며 하나하나 해결해 나갔지만, 처음이라 그런지 쉽지 않았다. 그래도 계속 반복하다 보니 조금씩 감이 오기 시작했다.

이어서는 KRDS 가이드를 배웠다. 처음에는 단순한 스타일 가이드 정도로 생각했는데, 내용을 들여다보니 UX 디자인의 본질을 꿰뚫는 기준들이 정리되어 있었다. 단순히 보기 좋은 화면을 만드는 것이 아니라, 사용자가 자연스럽고 직관적으로 경험할 수 있도록 철저하게 설계된 시스템이라는 걸 깨달았다. KRDS처럼 정교한 디자인 시스템이 완성되려면 얼마나 많은 리서치와 실험, 피드백이 반복되었을지 상상조차 어려웠다.

특히 KRDS 가이드 중에서도 디지털 포용 가이드가 무척 인상적으로 기억에 남았다. 평소 건강한 몸을 가진 나로서는 생각지도 못했던 사용성 기준들이 담겨 있었고, 이를 보면서 머리를 띵 맞은 듯한 기분이 들었다. UX 디자인을 할 때 항상 약자에 대한 배려가 있어야 한다는 점을 크게 깨달았다. 단순히 편리한 인터페이스를 만드는 것이 아니라, 장애가 있는 사용자나 디지털 접근성이 낮은 사람들까지 고려하는 것이 UX 디자인의 본질이라는 점을 다시금 생각하게 되었다.

이후 KRDS 가이드를 적용해 고용24 웹페이지를 분석하는 시간을 가졌다. 국가에서 완성도 높게 만든 결과물도 가이드에 맞지 않는 부분이 있거나 개선할 점이 발견된다는 점이 신기했다. 아무리 탄탄하게 설계된 UX라 해도 지속적인 수정과 보완이 필요하다는 걸 몸소 느낀 시간이었다. UX 디자인은 단순한 디자인 작업이 아니라 끊임없이 고민하고 개선해나가야 하는 끝없는 과정이라는 생각이 들었다.

이번 경험을 통해 UX 디자인을 배울 때 어떤 점을 더 짚어야 할지도 고민하게 되었다. 우선, 단순히 툴 사용법을 익히는 것이 아니라 사용자의 행동 패턴과 심리를 이해하는 것이 중요하다는 걸 깨달았다. 디자인을 단순히 예쁘게 만드는 것이 아니라, 사용자 입장에서 얼마나 편하게 이용할 수 있는지를 고려하는 과정이 필요하다. 그리고 한 번의 설계로 끝나는 것이 아니라 테스트하고 개선하는 과정이 필수적이라는 것도 다시금 느꼈다.

지금은 간신히 과제를 80%쯤 해낸 수준이지만, 언젠가는 이런 프로젝트에 당당하게 참여할 수 있을까? 그런 생각이 들자 막연한 불안감도 스며들었다. 하지만 결국 방법은 하나뿐이다. 계속 부딪쳐보는 것. 지금도 시행착오를 겪으며 조금씩 성장하고 있으니까. 머리로 이해하는 것과 손으로 직접 해보는 것은 다르고, 처음부터 잘하는 사람은 없으니까. 오늘은 조금 벅찬 하루였지만, 내일은 또 나아지겠지. 포기하지 않고 꾸준히 해보자. 화이팅!

 

 

 

 

 

📌 Figma 부모 컴포넌트 & 자식 컴포넌트 개념 정리

1. 부모 컴포넌트 vs. 자식 컴포넌트 아이콘 차이

  • 부모 컴포넌트: 컴포넌트의 원본(마스터) 역할을 하며, 수정하면 모든 자식 컴포넌트에 변경이 적용됨.
    • 아이콘: 원형 다이아몬드
  • 자식 컴포넌트: 부모 컴포넌트를 인스턴스로 가져온 것으로, 부모의 스타일과 속성을 상속하지만, 일부 속성을 개별적으로 변경 가능.
    • 아이콘: 속이 빈 다이아몬드

 

2. 실무 활용 팁

디자인 시스템에서 일관성 유지

  • 버튼, 카드, 입력 필드 같은 UI 요소를 부모 컴포넌트로 만들어 관리하면 일관성을 유지할 수 있음.

작업 효율성 향상

  • 부모 컴포넌트 하나만 수정해도 모든 자식 컴포넌트가 업데이트되므로, 디자인 수정 시간을 줄일 수 있음.

오버라이드 기능 활용

  • 자식 컴포넌트에서 텍스트, 색상, 아이콘만 변경하면 커스터마이징이 가능하므로, 같은 레이아웃의 다양한 변형을 쉽게 적용할 수 있음.

컴포넌트 재사용 최적화

  • 반복적으로 사용되는 UI 요소를 컴포넌트로 만들어 관리하면 디자인 시스템을 더욱 체계적으로 운영할 수 있음.

 

3. Figma에서 부모 & 자식 컴포넌트 사용 방법

(1) 부모 컴포넌트 생성 방법

  1. Figma에서 새 프레임(Frame) 또는 원하는 UI 요소를 디자인함.
  2. 선택한 요소를 우클릭 → Create Component(컴포넌트 만들기) 선택.
  3. 생성된 컴포넌트는 레이어 패널에서 원형 다이아몬드 아이콘으로 표시됨.

(2) 자식 컴포넌트(인스턴스) 만들기

  1. 부모 컴포넌트를 선택하고 Option(Alt) + 드래그하여 복사하면 자식 컴포넌트가 생성됨.
  2. 생성된 인스턴스는 속이 빈 다이아몬드 아이콘으로 표시됨.
  3. 필요하면 텍스트, 색상 등을 개별적으로 변경하여 사용할 수 있음.

 

4. 컴바인 베리언츠(Combine Variants) 사용 방법

(1) 개념

  • 여러 개의 유사한 컴포넌트를 하나의 Variants(변형) 그룹으로 결합하여, 속성(Property) 값만 변경하면 다양한 변형을 쉽게 적용할 수 있음.

(2) 사용 방법

  1. 여러 개의 컴포넌트 선택 → 우클릭 → Combine as Variants(베리언츠로 결합) 클릭.
  2. 오른쪽 패널에서 Properties를 설정하여 각 변형에 대한 옵션을 정의함 (예: Size, Color, State 등).
  3. 자식 컴포넌트를 만들면 오른쪽 속성 패널에서 Variants 옵션을 변경할 수 있음.

활용 예시

  • 버튼(Primary, Secondary, Disabled) 변형 관리
  • 아이콘 컬러 변경
  • 카드 UI에서 텍스트 정렬 방식(왼쪽, 가운데, 오른쪽) 변경

 

5. 레스토어 컴포넌트(Restore Component) 기능 활용

(1) 개념

  • 부모 컴포넌트에서 변경된 내용을 자식 컴포넌트가 원래대로 복원할 수 있는 기능.

(2) 사용 방법

  1. 자식 컴포넌트에서 이미지를 변경하거나 다른 속성을 수정함.
  2. 변경된 자식 컴포넌트를 우클릭 → Restore Default Property(기본 속성 복원) 클릭.
  3. 부모 컴포넌트의 원래 상태로 복구됨.

활용 예시

  • 디자인 시안 검토 중 원본 상태로 되돌릴 때 유용함.
  • 실수로 변경한 속성을 복원할 때 사용 가능함.

 

6. 레스토어 컴포넌트 기능을 활용한 이미지 변경 예제

(1) 기존 이미지 변경

  1. 자식 컴포넌트에서 이미지가 포함된 Frame을 선택.
  2. 오른쪽 속성 패널에서 Fill 클릭 후 원하는 이미지로 변경.

(2) 원래 이미지 복원

  1. 변경된 자식 컴포넌트를 선택.
  2. 우클릭 → Restore Default Property 클릭.
  3. 부모 컴포넌트의 원본 이미지로 복구됨.

 

🎯 정리

부모 컴포넌트 원본 컴포넌트, 모든 인스턴스에 영향 디자인 시스템 구축
자식 컴포넌트 부모 컴포넌트의 인스턴스, 일부 속성 변경 가능 UI 요소 변형 관리
컴바인 베리언츠 여러 컴포넌트를 하나의 Variants 그룹으로 결합 버튼 상태 관리, 아이콘 색상 변경
레스토어 컴포넌트 부모 컴포넌트의 원본 상태로 복원 실수로 변경한 디자인 복구

 

오늘은 피그마(Figma) 기초 수업의 두 번째 날이었다. 본격적으로 오토 레이아웃(Auto Layout) 기능을 배우면서 디자인 작업의 효율성을 높이는 방법을 익혔다. 역시 이론으로 설명을 들을 때와 내가 직접 활용할 때의 차이는 엄청났다. 수업 중에는 이해가 잘 된 것 같았지만, 막상 자습시간에 실습해보니 생각보다 쉽지 않았다. 그래서 따로 예제를 정리해두고, 반복적으로 연습해보기로 했다.

작업을 정신없이 진행하다 보니 레이어 정리가 엉망이 되어 있었다. 디자인을 계속 수정하다 보니 구조가 복잡해지고, 나중에는 나조차도 한눈에 파악하기 어려운 상태가 되어버렸다. 이렇게 작업하면 팀 프로젝트에서 다른 팀원들과 공유할 때 큰 문제가 생길 수밖에 없다는 걸 깨달았다. 정돈되지 않은 파일을 넘기면 팀원들이 이해하는 데 시간이 오래 걸릴 테고, 최악의 경우엔 "이렇게 작업하면 안 된다"는 피드백을 받을 수도 있을 것이다. 이런 실수를 줄이기 위해 수정이 편하도록 깔끔하게 작업하는 방식을 미리 확인하고 적용하려고 노력했다. 하지만 아직 기능이 익숙하지 않아서 더 많은 연습이 필요할 것 같다.

오늘은 또 하나의 중요한 단계로 포트폴리오 레퍼런스를 수집하고 자기소개서 초안을 작성하는 시간도 가졌다. 나를 PR하는 과정이 이렇게 어려운 줄 몰랐다. '내가 어떤 사람인지', '무엇을 잘하는지', '왜 UX 디자이너가 되고 싶은지'를 정리하는 것이 생각보다 쉽지 않았다. 하지만 이 과정이 결국 나를 더욱 객관적으로 바라보는 계기가 될 것 같다. 브랜드 기획을 이끌고, 실제 서비스를 제공하는 과정이 얼마나 대단한지 다시금 실감했다.

그러면서도 나는 PM을 지향하는 사람인지, UX 디자인을 지향하는 사람인지 톺아보는 시간을 가졌다. 프로덕트 매니저(Product Manager), 프로젝트 매니저(Project Manager), UX 디자이너(UX Designer)의 역할을 비교하며 나에게 맞는 방향을 고민해보았다.

  • 프로덕트 매니저는 제품의 비전과 전략을 수립하고, 시장과 사용자의 니즈를 분석하여 제품 개발의 방향성을 설정한다. 비즈니스적 사고와 문제 해결 능력이 중요하며, 다양한 부서와의 협업을 조율하는 역할을 맡는다.
  • 프로젝트 매니저는 일정 관리와 팀 운영을 책임지며, 프로젝트 목표를 달성하기 위해 리소스를 조율한다. 팀 간의 커뮤니케이션과 문제 해결 능력이 요구되며, 프로젝트의 원활한 진행을 보장하는 것이 핵심이다.
  • UX 디자이너는 사용자 경험을 설계하며, 사용자의 니즈를 분석하고 이를 시각적 및 인터랙션 디자인으로 풀어낸다. 데이터를 기반으로 문제를 해결하며, 사용자 중심의 사고방식이 필수적이다.

현재 나의 관심은 UX 디자인에 초점이 맞춰져 있지만, 제품 기획과 운영에도 관심이 많다. UX 디자이너로서 경력을 쌓으면서 PM 역할을 수행할 기회가 있을지도 모르겠다는 생각이 들었다. 그렇기에 포트폴리오를 준비할 때 단순한 UI 디자인 결과물뿐만 아니라, 사용자 리서치, 데이터 분석, 문제 해결 과정을 강조하는 방향이 필요할 것 같다. 또한, 협업 과정에서 어떤 역할을 수행했는지 명확하게 드러내야 한다.

아마 강사님도 이런 고민을 하며 우리가 포트폴리오에 집중할 수 있도록 커리큘럼을 구성하신 것 같다. 덕분에 UX 디자인을 배우는 과정이 단순한 기술 습득이 아니라, 나의 강점과 방향성을 찾는 여정이라는 점을 실감했다. 정말 감사한 마음이다.

앞으로도 피그마 기능을 꾸준히 익히고, 포트폴리오 구성과 자기소개서를 다듬어 나가야겠다. 아직은 부족한 점이 많지만, 배운 것을 하나씩 적용해 가면서 성장하는 과정을 즐기고 싶다.

 

 

📌 피그마(Figma) 오토 레이아웃(Auto Layout) 학습 가이드

🔹 1. 오토 레이아웃(Auto Layout) 개념

오토 레이아웃이란?

  • 요소(텍스트, 버튼, 카드, 리스트 등)를 자동 정렬하고 크기를 동적으로 조정하는 기능
  • UI 컴포넌트가 유연하게 변화하도록 만들어 반응형 디자인을 쉽게 적용할 수 있음

오토 레이아웃 적용 방법

  1. 텍스트, 프레임, 버튼 등 선택
  2. Shift + A → 오토 레이아웃 적용
  3. 방향(세로 ↕, 가로 ↔), 간격(Spacing), 패딩(Padding), 정렬(Alignment) 설정
  4. 크기 조절 옵션 선택:
    • Hug Contents → 내부 콘텐츠 크기에 맞게 자동 조정
    • Fill Container → 부모 요소 크기에 맞춰 확장
    • Fixed Width → 고정 크기 설정

🔹 2. 오토 레이아웃 활용 예제

🔸 예제 1: 반응형 버튼 만들기

📌 텍스트 길이에 따라 자동 크기 조정되는 버튼

  1. T를 눌러 텍스트 입력 (예: 확인)
  2. Shift + A → 오토 레이아웃 적용
  3. 패딩 설정: 좌우 16px, 상하 10px
  4. Hug Contents 선택 (텍스트 길이에 맞춰 크기 변경)
  5. 배경색 추가, 모서리 둥글게(8px) 적용

🔸 예제 2: 카드(Card) UI 만들기

📌 제목 + 설명 + 버튼이 포함된 카드 UI

  1. F를 눌러 프레임 생성 (200x250)
  2. 제목(T), 설명(T), 버튼 추가 후 Shift + A
  3. 내부 요소 정렬 → 수직(Vertical)
  4. 내부 간격(Spacing) 8px, 패딩 16px 설정
  5. 배경색 추가(#F5F5F5), 모서리 둥글게(12px) 적용

🔸 예제 3: 반응형 네비게이션 바(Navbar)

📌 화면 크기에 맞게 자동 조정되는 네비게이션 바

  1. F → 가로형 프레임 생성 (1440x80px)
  2. 내부 요소 추가: 로고(T), 메뉴(T), 로그인 버튼
  3. Shift + A → 오토 레이아웃 적용 (수평 정렬)
  4. Auto Spacing 사용 → 간격 자동 조정
  5. 버튼에도 오토 레이아웃 적용
  6. Fill 설정 → 부모 프레임 크기에 맞게 자동 조정

🔹 3. 수정하기 쉬운 레이아웃 관리 팁

🔹 (1) 오토 레이아웃 + 네이밍 규칙 사용

레이어 정리 필수! (Navbar, Card, Button 등 직관적인 이름 부여)
✅ 그룹이 많아질 경우 Frame 안에 Frame을 추가하여 구조를 정리

 

예시)

📂 Navbar
├── 📂 Left (로고)
├── 📂 Center (메뉴)
├── 📂 Right (로그인 버튼)

 


🔹 (2) 컴포넌트(Component)로 변환

✅ 반복적으로 사용하는 UI 요소는 Ctrl + Alt + K로 컴포넌트화
✅ Variants(변형) 기능을 사용하여 다양한 스타일의 버튼/카드 관리 가능


🔹 (3) 반응형을 고려한 크기 설정

Hug Contents → 내용 크기에 맞게 자동 조정
Fill Container → 부모 프레임 크기에 맞게 자동 확장
Auto Layout + Constraints 활용 → 화면 크기에 따라 자동 조정


🔹 (4) 간격(Spacing)과 정렬(Alignment) 활용

내부 요소 간격(Spacing) 유지 → 8px, 16px 같은 규칙 사용
Alignment(정렬) 조정 → 왼쪽 정렬, 가운데 정렬 등을 활용하여 깔끔한 UI 구현


📌 4. 실습 체크리스트

✅ Shift + A로 오토 레이아웃 적용해보기
버튼 만들기 → 크기 자동 조정 설정
카드 UI 만들기 → 패딩, 간격 조절 실습
네비게이션 바 제작 → Auto Spacing 활용
컴포넌트로 변환 후 Variants(변형) 설정


📌 오토 레이아웃 유지보수가 어려운 경우 및 해결 방법

🔹 1. 유지보수가 어려운 경우 & 해결 방법

⚠️ 문제 1: 오토 레이아웃 중첩이 과도할 때

💡 문제 상황

  • 여러 개의 오토 레이아웃을 중첩하면 구조가 복잡해져 수정이 어려움
  • 필요 없는 프레임이 많아지면 수정 시 위치 조정, 크기 변경이 번거로움

✅ 해결 방법
레이어 구조 정리: 불필요한 중첩된 프레임 제거
주요 그룹화 기준 정하기: Frame > Section으로 깔끔하게 정리
컴포넌트화(Component) 사용: 중복되는 요소를 컴포넌트로 변환하여 일관성 유지


⚠️ 문제 2: Spacing 값이 일정하지 않을 때

💡 문제 상황

  • 같은 UI 구성 요소 간 간격(Spacing)이 일관되지 않으면 디자인이 어색함
  • 디자인 가이드 없이 각각 다르게 설정하면 수정 시 불편

✅ 해결 방법
일관된 Spacing 값 사용: 8px, 16px 같은 기준을 정해 적용
Auto Spacing 활용: Auto 옵션을 사용하여 요소가 자동 정렬되도록 설정


⚠️ 문제 3: Fixed, Hug, Fill 설정이 적절하지 않을 때

💡 문제 상황

  • 텍스트가 늘어나거나 줄어들 때 버튼이나 카드 크기가 의도치 않게 변형
  • Fixed Width로 설정하면 반응형이 어려움
  • 반대로 Hug Contents를 잘못 사용하면 크기가 의도대로 조정되지 않음

✅ 해결 방법
버튼 및 카드 크기 설정 원칙

  • 버튼: Hug Contents (내용 크기에 맞게)
  • 카드: Fill Container (부모 프레임에 맞게)
    반응형이 필요하면 Fill을 적극 활용
    Fixed Width를 최소화하고 Hug/Fill로 조정 가능하게 설정

⚠️ 문제 4: 정렬(Alignment)이 일관되지 않을 때

💡 문제 상황

  • 같은 UI 내에서 일부 요소가 왼쪽 정렬, 일부는 가운데 정렬로 섞여 있음
  • 수정할 때 요소가 제멋대로 움직이며, 재정렬이 필요함

✅ 해결 방법
정렬 기준을 정하기:

  • 버튼/텍스트는 Left 또는 Center로 일관되게 유지
  • 네비게이션 바는 Space Between을 사용해 균등 배치
    오토 레이아웃의 정렬 옵션 활용
  • Alignment를 사용해 요소가 동일한 위치에 배치되도록 조정

⚠️ 문제 5: Variants 없이 개별 요소를 수정할 때

💡 문제 상황

  • 여러 개의 버튼 스타일을 개별적으로 수정해야 할 경우 일괄 수정이 불가능
  • 버튼이 많아지면 디자인 관리가 어려워짐

✅ 해결 방법
Variants 활용 (Ctrl + Alt + K → Variants 생성)
✔ 여러 개의 버튼 스타일을 하나의 컴포넌트에서 관리
✔ Property를 사용하여 색상, 크기, 상태(활성/비활성) 조절 가능


📌 유지보수를 쉽게 하는 체크리스트

불필요한 중첩된 오토 레이아웃을 정리했는가?
Spacing(간격)을 일정한 규칙으로 유지했는가?
Fixed/Hug/Fill 설정을 적절히 활용했는가?
Alignment(정렬)를 일관되게 적용했는가?
Variants를 활용하여 반복되는 요소를 쉽게 관리했는가?

 

 

Material 3 Design Kit:

https://www.figma.com/community/file/1035203688168086460

 

 

 

Figma 실습 링크: https://www.figma.com/design/p5gz3PylSi1OuUe2zbSQUx/PD_03_%EA%B0%95%EC%86%8C%EC%97%B0?node-id=1-4&p=f&t=jmdVAeonFdfW77sz-0

 


 

[📌 자기소개서 초안]

1. 자기소개 및 UX 디자인을 선택한 이유

안녕하세요. 다양한 경험을 UX 디자인에 녹여낼 준비가 된 강소연입니다. 저는 멀티미디어를 전공하며 시각적 커뮤니케이션을 익혔고, 이후 상업사진 분야에서 6년 동안 근무하며 사용자 감각과 심리를 깊이 연구하는 기회를 가졌습니다. 또한, 서비스업에서의 고객 응대 경험을 통해 사용자의 니즈를 파악하고 공감하는 능력을 키워왔습니다.

이러한 경험은 UX 디자인과 자연스럽게 연결됩니다. 사진 작업에서는 사용자의 시선을 사로잡는 구도를 고민했고, 서비스업에서는 사용자의 요구를 빠르게 파악하고 대응하는 역량을 길렀습니다. 결국, 좋은 디자인이란 단순히 미적인 요소를 뛰어넘어 사용자의 경험을 개선하는 것이라는 점을 깨달았고, UX 디자인을 통해 보다 실질적인 문제 해결에 기여하고 싶어 이 길을 선택하게 되었습니다.


2. UX 디자인을 하면서 쌓아온 경험 및 협업 과정

현재 UX 디자인을 전문적으로 경험해본 적은 없지만, 이전 직무에서 UX적 사고를 적용한 경험이 많습니다. 예를 들어, 상업사진 작업에서는 단순히 멋진 이미지를 촬영하는 것이 아니라, 소비자의 관심을 유도하고 브랜드 아이덴티티를 효과적으로 전달해야 했습니다. 이를 위해 색감, 배치, 시각적 흐름을 조정하며 사용자 반응을 분석하는 과정을 거쳤고, 이는 UX 디자인에서 사용자 행동을 연구하는 과정과 유사합니다.

또한, 서비스업 경험을 통해 고객 응대 과정에서 다양한 피드백을 받고 빠르게 반응하는 능력을 길렀습니다. 이는 UX 디자인에서 사용자 피드백을 기반으로 개선하는 과정과 연결됩니다. 특히 고객의 불만 사항을 해결하기 위해 문제의 원인을 분석하고, 최적의 솔루션을 고민하는 과정은 UX 리서치 및 인터랙션 디자인의 사고방식과 맞닿아 있습니다.

협업 측면에서도, 사진 촬영 시 클라이언트와 마케터, 디자이너와의 협업이 필수적이었습니다. 프로젝트 초반에는 서로의 기대치를 조율하는 과정에서 어려움이 있었지만, 지속적인 커뮤니케이션을 통해 고객의 니즈와 브랜드 방향성을 균형 있게 반영하는 방법을 익혔습니다. 이는 UX 디자인에서 다양한 이해관계자들과 협력하여 최적의 사용자 경험을 도출하는 과정과 유사합니다.


3. 신중한 성향과 빠른 의사결정이 필요한 상황에서의 경험

저는 본래 신중한 분석을 통해 결정을 내리는 성향이지만, 빠르게 결정을 내려야 하는 상황에서도 효과적으로 대응해왔습니다. 상업사진 촬영 현장에서는 제한된 시간 안에 최상의 결과를 만들어야 하는 경우가 많았고, 즉각적인 판단과 조정이 필수적이었습니다.

예를 들어, 촬영 당일 예상치 못한 조명 문제로 계획했던 구도를 변경해야 했던 경험이 있습니다. 이때 즉각적으로 대체안을 고민하고, 팀원들과 협의하여 빠르게 해결책을 도출할 수 있었습니다. 이러한 경험을 통해 신속한 문제 해결 능력을 키웠으며, 이는 UX 디자인에서 제한된 시간 내에 최적의 사용자 경험을 제공해야 하는 상황에서도 큰 도움이 될 것입니다.


4. UX 디자인 철학 및 목표

저는 UX 디자인을 단순한 화면 구성 작업이 아니라, 사용자의 문제를 해결하는 과정이라고 생각합니다. 이전의 경험들이 UX 디자인에서 중요한 요소로 작용할 수 있다는 점을 깨닫고 있으며, 이를 바탕으로 다음과 같은 철학을 가지고 UX 디자인을 배우고 성장해 나가고자 합니다.

📌 데이터 기반의 UX 디자인: 사용자 행동을 분석하고 피드백을 반영하여 지속적으로 개선하는 접근 방식을 추구합니다.

📌 사용자 중심 사고: 서비스업과 상업사진 경험에서 배운 사용자 공감 능력을 UX 디자인에서도 적극 활용하겠습니다.

📌 협업과 커뮤니케이션: 다양한 직군과의 협업 경험을 살려, 개발자와 기획자, 마케터 등과 원활하게 소통하며 최적의 디자인 솔루션을 도출하는 것을 목표로 합니다.

앞으로는 모바일 UX/UI 디자인을 전문적으로 연구하고 싶으며, 특히 사용자 친화적인 인터랙션 디자인과 접근성(Accessibility) 개선에 관심을 두고 있습니다. UX 디자인을 통해 더 많은 사람들에게 편리한 경험을 제공하는 것이 저의 목표입니다.

감사합니다.

 

Figma 링크: https://www.figma.com/slides/Uu2mjJ0uXPQfniGzBLdzgv/PD_03_%EA%B0%95%EC%86%8C%EC%97%B0?node-id=5-22&t=lm2LH5KVTJFHMxru-0

 

 

 

 

오늘은 피그마 기초 수업 첫날이었다. 사실 큰 부담 없이 시작한 수업이었는데, 막상 진행하다 보니 집중도 많이 필요하고 생각보다 기력 소모가 컸다. 수업이 끝나자마자 밥을 먹고 그대로 기절해버렸고, 자다가 갑자기 해결되지 않은 문제 두 가지가 떠올라 새벽에 깨어났다. 이렇게라도 정리해두지 않으면 또 잊어버릴 것 같아서 일기를 남긴다.

 


해결해야 했던 두 가지 문제

1. 피그마에서 Pretendard 폰트가 안 보이는 문제

수업 중에 크롬에서 피그마를 열었는데, Pretendard 폰트가 목록에 나타나지 않았다. 이 문제를 해결하기 위해 몇 가지 확인해본 과정은 다음과 같다.

해결 방법:

  1. Pretendard 폰트가 시스템에 설치되어 있는지 확인
    • Mac의 Font Book(서체 관리자)를 열어 확인했는데, Pretendard가 정상적으로 설치되어 있었다.
  2. 피그마에서 로컬 폰트를 불러오기 위한 Figma Font Helper 설치
    • 크롬에서 실행하는 피그마는 로컬 폰트를 직접 인식하지 못하므로 Figma Font Helper가 필요했다.
    • Figma Font Installer에서 Mac용 Font Helper를 다운로드하여 설치했다.
  3. 크롬을 완전히 종료 후 다시 실행
    • Font Helper를 설치했음에도 바로 적용되지 않아 크롬을 완전히 종료한 후 다시 실행하니 Pretendard 폰트가 정상적으로 나타났다.

2. 구글 크롬 dmg 파일이 계속 마운트되면서 실행되는 문제

구글 크롬을 실행할 때마다 .dmg 파일이 계속 마운트되면서 실행되는 문제가 있었다. 이 상태에서는 크롬이 정상적으로 설치된 것이 아니라 임시 실행되는 것이었다.

해결 방법:

  1. 구글 크롬을 올바르게 설치하기
    • .dmg 파일을 실행하면 크롬 아이콘과 Applications 폴더가 나오는 창이 뜬다.
    • 크롬 아이콘을 Applications 폴더로 드래그하여 이동해야 한다.
    • 나는 이 과정을 생략하고 바로 크롬을 실행했기 때문에 문제가 발생했다.
  2. 이전 dmg 파일 제거하기
    • Finder > Downloads 폴더에서 기존의 Google Chrome.dmg 파일을 삭제했다.
    • 크롬을 완전히 종료한 후 다시 실행했다.

이제 크롬이 정상적으로 실행되었고, 더 이상 .dmg 파일이 마운트되는 문제가 발생하지 않았다.


나의 강점과 약점, 그리고 극복 방법

오늘 수업 마지막에는 나의 강점과 약점을 적어보는 시간이 있었다. 생각보다 쉽지 않은 과정이었다. 강점을 적는 건 어딘가 쑥스러웠고, 약점을 적는 건 나 자신을 더 깊이 들여다봐야 해서 부담스러웠다. 하지만 강사님이 강조하신 ‘나와 대화하는 시간’을 가지는 것이 중요하다는 말이 떠올랐다. 그래서 고민 끝에 아래와 같이 정리했다.

강점: 사회 경험이 많다, 반복적인 도전에 강하다

⬆️ 강화를 위한 방법

  • 사회 경험을 UI/UX 디자인에 접목하기
    • 다양한 사람들과 협업한 경험이 많으므로, 사용자 입장에서 고민하는 능력이 강점이 될 수 있다.
    • 피그마 프로젝트에서 가상의 페르소나를 설정할 때도 현실적인 관점을 적용할 수 있도록 연습하자.
  • 반복적인 도전에 강한 점을 활용하기
    • UI/UX 디자인은 피드백을 반영하며 여러 번 수정하는 과정이 필요하다. 이 과정에서 내 강점을 최대한 살릴 수 있다.
    • 시행착오를 긍정적으로 받아들이고 개선하는 것이 나의 강점이라는 점을 인식하자.

약점: 경력에 비해 나이가 많다, 순발력이 약하다

✅ 긍정적인 방향으로 극복하기

  • 나이에 대한 부담을 줄이기
    • 경험이 많다는 것은 장점이기도 하다. 연차가 많다고 해서 뒤처지는 것이 아니라, 오히려 다양한 경험을 UI/UX에 녹여낼 수 있다.
    • 나보다 어린 동료들과 협업할 때도 열린 마음을 유지하며 배울 자세를 가지자.
  • 순발력 부족을 보완하는 연습하기
    • 빠르게 대응하는 것이 어렵다면, 미리 정리하는 습관을 들이자. 정리된 정보를 기반으로 하면 속도를 높일 수 있다.
    • 피그마 작업 중 즉흥적으로 디자인해야 할 때 대비해, 다양한 레이아웃과 스타일을 사전에 연구해두는 것도 도움이 될 것이다.

 


마무리

피그마 첫 수업날부터 예상하지 못한 문제들을 해결하고, 나에 대해 깊이 고민하는 시간을 가졌다. 처음엔 피곤함만 느꼈지만, 결국은 배운 것이 많았던 하루였다. 앞으로도 문제를 해결하는 과정에서 배운 것들을 이렇게 기록해 두면, 같은 문제에 부딪혔을 때 쉽게 해결할 수 있을 것 같다. UI/UX 디자인이라는 새로운 도전을 즐기면서 나만의 강점을 더 살려가야겠다.

 

 

 

+ Recent posts