반응형 웹 디자인과 UML 실습 실무에서 활용하는 핵심 기술

AI 사업개발 과정 - Figma 실습 & UML 기초 학습

1. Figma 실습 - 반응형 웹 디자인 & 오토레이아웃 활용

이번 실습에서는 Figma를 활용하여 반응형 웹 디자인을 제작하고 오토레이아웃(Auto Layout)을 활용하는 방법을 학습했다. 특히 기존 웹사이트를 모바일 환경으로 변환하면서 반응형 웹 디자인의 핵심 요소를 이해하는 것이 목표였다.

(1) 피그마 실습 개요

• 수업 시간: 10:00 - 16:00 (1~5교시)
• 주요 학습 내용:
  • 반응형 웹 동작을 반영하여 오토레이아웃으로 표현하는 방법
  • 모바일 웹 기획 및 디자인 작업 프로세스 학습
  • 고정 영역(Fixed Positioning)과 스크롤 가능 영역(Scrollable Content) 설정법
  • 반응형 버튼 및 미러링 기능 활용

(2) 반응형 웹을 위한 오토레이아웃(Auto Layout) 활용법

오토레이아웃은 UI 요소들의 정렬과 크기를 자동으로 조정할 수 있도록 해주는 기능이다. 이를 활용하면 반응형 디자인을 보다 효율적으로 구현할 수 있다.

오토레이아웃의 핵심 개념

• UI 요소들이 자동으로 정렬됨 (수직/수평 정렬 가능)
• 컨테이너 크기에 맞춰 유동적으로 크기 조정 가능
• 마진 및 패딩을 설정하여 디자인의 일관성을 유지할 수 있음
• 반응형 웹에서는 ‘Hug Contents’, ‘Fill Container’ 등의 설정을 적절히 활용

오토레이아웃 활용 방법

1. Auto Layout 적용: 컴포넌트를 선택한 후 Auto Layout 버튼 클릭
2. 정렬(Direction) 설정: 수직(Vertical) 또는 수평(Horizontal) 선택
3. Spacing 설정: 요소 간의 간격을 조정
4. Padding 설정: 내부 콘텐츠와 컨테이너 간격 조정
5. Resizing 옵션 설정: ‘Hug’, ‘Fixed’, ‘Fill Container’ 등의 크기 조정 방식 활용

(3) 반응형 버튼 테스트 & 미러링 활용

• 반응형 버튼을 만들려면 Auto Layout과 Resizing 옵션을 적극 활용해야 한다.
• Figma Mirror 앱을 사용하면 실제 모바일 환경에서 UI를 테스트할 수 있다.
• Fixed Position을 적용하면 네비게이션 바나 푸터가 스크롤 시 고정된다.
• Shift & Space 단축키를 활용하면 디자인 작업 속도를 크게 높일 수 있다.

2. UML과 Gleek을 활용한 모델링 학습

이번 시간에는 UML 모델링을 돕는 도구인 Gleek을 활용하여 액티비티 다이어그램과 클래스 다이어그램을 작성하는 실습을 진행했다.

(1) Gleek(글릭) 도구 소개

• UML 다이어그램을 쉽게 작성할 수 있도록 도와주는 온라인 도구
• 코드 기반으로 다이어그램을 작성하는 방식 (GUI 기반이 아님)
• 주요 지원 다이어그램: 액티비티 다이어그램, 클래스 다이어그램, 시퀀스 다이어그램 등

(2) UML 개념 학습

1) 액티비티 다이어그램(Activity Diagram)

• 사용자의 행동 흐름을 시각적으로 표현하는 다이어그램
• 시작(Start)과 종료(End) 노드를 포함하며, 조건(분기)과 반복 요소를 정의할 수 있음

2) 클래스 다이어그램(Class Diagram)

• 객체 지향 시스템에서 데이터 구조와 객체 간의 관계를 표현하는 다이어그램
• 객체(Object), 속성(Attribute), 메서드(Method), 관계(Association, Inheritance) 등을 정의함

(3) 유즈케이스 템플릿 작성 실습

이번 실습에서는 카카오톡 PC 버전 설치 및 회원가입을 주제로 유즈케이스 템플릿을 작성했다.

유즈케이스 1: 카카오톡 PC 버전 설치(예시)

항목 내용

유즈케이스 이름	카카오톡 PC 버전 설치
설명	사용자가 PC에 카카오톡을 다운로드하고 설치하는 과정
행위자(Actor)	사용자
사전 조건	인터넷 연결 필요, 운영체제 호환 여부 확인
기본 흐름	웹사이트 접속 → 다운로드 → 설치 진행 → 실행
예외 흐름	인터넷 연결 없음 → 오류 메시지 표시
후처리	설치 완료 후 카카오톡 실행

유즈케이스 2: 카카오톡 회원가입(예시)

항목 내용

유즈케이스 이름	카카오톡 회원가입
설명	사용자가 카카오 계정을 생성하여 회원가입을 완료하는 과정
행위자(Actor)	사용자
사전 조건	PC 또는 모바일에서 카카오톡 실행 가능
기본 흐름	‘회원가입’ 버튼 클릭 → 이메일 입력 → 인증번호 입력 → 비밀번호 설정 → 프로필 정보 입력 → 가입 완료
예외 흐름	인증번호 오류 → 오류 메시지 표시
후처리	회원가입 완료 후 로그인 가능

3. KPT & TIL

✅ Keep (유지할 점)

• 오토레이아웃을 활용한 반응형 UI 설계 연습이 유익했다.
• UML 다이어그램을 활용하여 시스템 설계를 시각적으로 표현하는 능력을 배웠다.
• 유즈케이스 템플릿을 작성하며 요구사항을 체계적으로 정리하는 법을 익혔다.

❌ Problem (개선할 점)

• UML 다이어그램을 실무에서 어떻게 활용할지 구체적인 사례 연구가 부족했다.
• 반응형 UI 디자인의 세부 조정이 아직 어렵다.
• 유즈케이스 예외 상황을 보다 더 다양하게 고려해야 한다.

🔄 Try (다음에 시도할 점)

• 실제 프로젝트에서 UML 다이어그램을 활용하여 요구사항 문서를 작성해보기
• Figma의 고급 기능(Figma Variables, Component Variants) 활용 연습
• UML의 다양한 다이어그램을 연습하여 설계 역량 강화

📌 TIL (Today I Learned)

• 오토레이아웃을 활용하면 UI 유지보수가 용이하고, 반응형 디자인을 쉽게 구현할 수 있다.
• UML 다이어그램을 사용하여 시스템의 구조를 명확히 시각화할 수 있다.
• 유즈케이스 템플릿을 작성하면서 예외 상황과 다양한 시나리오를 고려하는 것이 중요하다.
• 실무에서 UML을 활용할 경우, 기획과 개발 간의 원활한 커뮤니케이션이 가능해진다.

4. 개인적인 고민과 앞으로의 방향

이번 수업을 통해 UI/UX 설계와 소프트웨어 모델링이 단순한 디자인 작업이 아니라 체계적인 기획과 분석이 필요하다는 점을 다시금 깨달았다. 오토레이아웃을 활용한 반응형 UI 설계와 UML 다이어그램을 통한 시스템 분석 및 설계가 실무에서 얼마나 중요한지 경험할 수 있었다. 머리로는 이해하지만 실제 적용해보면 고려해야될게 한두개가 아니다. UX/UI디자이너 만큼의 역량을 바라는 건 아니지만  눈에 익고 어떻게 사용하는지 흐름을 알 수 있을 정도로 역량을 올려야겠다는 생각을 해봤다.

오늘 해본 UML 모델링을 실무에서활용하기엔 내가 부족한 점이 많다고 느꼈다. 앞으로는 더 많은 사례를 분석하고 다양한 다이어그램을 직접 작성해보는 연습을 해야겠다. 또한, Figma의 고급 기능을 익혀서 더 효율적인 UI 설계 프로세스를 구축하는 방향으로 학습을 이어나가야겠다.