(DAY16) 디자인 시스템 필수 개념, + 심화반 킥오프

 

 

안녕하세요 :)

오늘은 전날과 이어서 피그마를 활용하여 클론디자인을 진행했습니다. 오늘은 웹사이트 클론을 했어요.

그리고 컴포넌트와 인스턴스, 디자인시스템에 대해 공부하는 시간을 가졌습니다.

알고 있었다고 생각했는데 정말 수박 겉만 핥고 있었네요🙄

 

---

 

 

 

 

✏️오늘의 학습

컴포넌트, 인스턴스, 디자인시스템 알아보기

실습 1) 웹사이트 Cafe 24 클론 디자인
실습습 2) 로그인페이지 제작해보기

 

 

 

 

 

📖오늘의 핵심

 "오늘 나에게 멋진 일이 일어날거야" 내게 외치기.

스스로 뇌를 훈련시켜서 이유 없이 기분 좋은 태도를 만들어라. 그것이 당신의 자연스러운 환경이 되기를 바란다.

 

 

 

 

 

"좋은 태도를 가지면 좋은 일이 실제로 일어날거라고 믿는다. 뇌가 그것을  찾도록 준비될 것이다.

오늘 무슨일이 일어나든, 나는 그것을 감당할 수 있다.

No  matter what happens today,  I can handle it."

(멜로빈스 영상 中)

 

 

 

 

 

 

📝수업 내용 메모장

 

컴포넌트
디자인에서 반복적으로 사용하는 요소를 하나로 묶어 재사용 가능하게 만든 디자인 템플릿이다.
하나의 '기준 템플릿'으로 만들어 여러 화면에서 반복해서 사용할 수 있도록 하는 기능

컴포넌트와 인스턴스
메인 컴포넌트 = Parent 부모
인스턴스 = Child 자식

요소들 싸잡아서 ctrl alt G → 잡은 요소들이 한 Frame 안에 들어감. (오토레이아웃과는 다름)
 
ctrl alt K → 컴포넌트 만들기 (보라색 다이아몬드 아이콘으로 변함)
ctrl R : 선택한 요소 프레임이나 레이어 이름 바꿀 수 있음

우클릭 → Detach instance 클릭 
인스턴스를 원래 상태로 돌려놈

요소들 전부 싸잡아서 화면 우측 상단 [컴포넌트 아이콘 ▼] → create multiple components 클릭

:  각각을 전부 컴포넌트로 만들어줌


디자인 시스템 필수 개념
디자인과 개발에 사용되는 일관된 컴포넌트, 가이드라인, 디자인 가치를 포괄하는 체계적인 구조.

디자인시스템 예시 사이트
카본, 지마켓, 라인, Atalassian(협업툴)

디자인 시스템의 구조
기업마다 추구하는 가치와 제품에 따라 다양한 구조를 가짐
일반적으로는 개요, 파운데이션(기초 요소), 컴포넌트, 패턴, 템플릿, 스타일 가이드라인이 있다.

파운데이션 Foundations
디자인의 기본 언어. 브랜드의 정체성과 감성을 결정짓는 요소들.
(아토믹 디자인과 연결됨)
파운데이션 안에는 주로 컬러, 타이포그래피, 간격/레이아웃, 아이콘, 모션, 접근성 등이 쓰여있음
 
컴포넌트 components
기초 요소를 조합해 만들어진 재사용 가능한 UI단위
버튼, 폼 요소(Input, Checkbox, Select 등), 토스트/모달, 복합 컴포넌트(카드, 테이블, 네비게이션) 등

 

패턴 Patterns
여러 컴포넌트를 조합해서 만든 사용자 흐름 중심의 디자인

⚠️ 패턴 예시
로그인 패턴 = Input + 버튼 + 에러메시지
검색 필터링 = 검색창 + 드롭다운 + 토글

네이버 로그인 화면
컴포넌트 = Input, Labelm Error message, CTA button
상태처리 = 실패시 에러 문구/ 성공시 이동
UX 고려 = 자동 포커스, 비밀번호 보기 기능, 'Enter'키 작동

 

★ 패턴은 UX문제해결을 위한 구조화된 설계방식, 사용자흐름에 맞는 구성의 모범 사례를 제공한다

 

 

템플릿 Templates
전체 페이지나 섹션의 구조. 보통 제품의 UX흐름을 시각적으로 구성할 때 사용함
ex)
대시보드 템플릿 = 카드 + 차트 + 필터로 구성된 전체 화면
목록 페이지 = 테이블 + 필터 + 액션 버튼
온보딩 화면 = 이미지 + 설명 텍스트 + CTA버튼


스타일 가이드라인
파운데이션을 중심으로 전체 스타일을 설명하는 문서, 그래서 계층 외부에 있는 "설명서" 역할
보통 모든 스타일 규칙을 모은 문서. 

내용을 요악하고 정리한 형태.

---

심화반 킥오프  목요일 오후 8시 ~10시

피그마 단축키 꿀팁 공유

Shift S = 섹션 설정 
K = 스케일 조절 
ctrl Shift \(원 표시 버튼) = 화면 사이드탭 숨기기
 alt shift C/V = 텍스트 설정(속성) 복사/붙여넣기
ctrl shift C/V = 이미지(png)로 복사/붙여넣기  

 

 

+ 무료 아이콘 사이트 추천
https://fonts.google.com/icons

Material Symbols and Icons - Google Fonts

 

 

 

 

실습 1) Cafe 24 클론 디자인

 

 

 

💡 클론디자인 진행할수록 점점 하이라키 보는 눈이 커지고 있다는 것이 실감되고 있다.

상단 검은 배너영역 작업하는데, 정보구조 묶고 마지막에 한번 더 오토레이아웃으로 묶어줬는데 이 작업은 왜 한건지 이해를 못했다...ㅎ

 

 

 

 

 

실습 2) 로그인페이지 제작해보기

 

(레퍼런스) 페이스북 로그인페이지 캡쳐화면

 

사용자 입장에서 보는 것과 또 다른 느낌이었다.

로그인을 한다고 생각하고 눌러보면서 아주 조금이라도 UI가 바뀐 부분이 있다면 일단 캡쳐해서 나열해봤다. 생각보다 디테일하게 봐야 변화를 캐치할 수 있었고, 그 변화되는 UI들을 전부 디자이너가 작업하는거구나 깨달았다.

 

💡  아주 작은 단위여도 사용자가 행동을 하면, 그에 대한 피드백을 제공해줘야 하는구나를 배웠다.

 

 

 

 

 

실습 진행 시간 관계상, 모든 과정을 따라해보진 못했다. 피그마로 오늘 배운 컴포넌트, 인스턴스를 활용해서 텍스트필드와 버튼을 만들었다. 

💡작업하기 편하려고 컴포넌트로 만들어서 복사에서 쓰는건데, 작업순서가 꼬이면 컴포넌트로 만든 의미가 없어지는구나...를 배웠다.ㅋㅋㅋㅋㅋㅋㅋㅋ내가 예상했던 시간보다 작업이 오래걸렸다; 

 

 

 

 

 

수준별학습 심화반 킥오프 데이

 

심화반에 발랄한 사람들이 많은 것 같다. 분위기가 시끌벅적하고 활발한 느낌이다.

사다리타기를 통해 운명의 짝꿍을 정했다. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

 

짝꿍과 함께 서비스를 하나 정해서, 화면 플로우를 캡쳐하고, 경쟁사와 비교하고, 불편한 점을 가져오는 과제를 받았다.

과제는 미래의 내가 하겠지...

피그마 단축키 꿀팁 공유 시간이 훨씬 길었다.

민트쌤의 챗gpt스러운 말투로 갑자기 이름으로 삼행시를 해주셨다. ㅋㅋㅋㅋㅋㅋㅋ 엉뚱하면서 매력적인 선생님을 만났다.

심화반이라서 빡세겠지 하고 긴장하고 갔지만 앞으로 재밌을 것 같다.

 

민트쌤 말씀대로

여기 안에서 최대한 많이 틀려보고 오답노트 해보면서 공부해가면 될 것 같다. 💪🏻💪🏻

 

 

 

 

 

 

우히히

 

삼행시 일등 먹었다 !

밤늦게까지 즐거웠당

 

 

 

---

 

💡느낀점

 

요즘 계속 클론디자인 하면서 피그마를 익히는 중인데, 작업 결과물이 정돈되고 잘나오면 나 좀 치는데?하고 착각하게 된다.

뇌 빼고 따라하면 안되겠다. 어떻게 작업해야 제한된 시간에 일의 효율을 낼 수 있을지도 생각해야 할 것 같다. 3D모델링 할 때도 어떤 작업을 먼저 하느냐에 따라 모델링이 꼬이기도 하는데 그 감각이 단순히 3D모델링에서만 발생하는 일이 아니라는 것을 느꼈다. 피그마 작업에서도 주의해야겠다는 생각을 했다. 근데 생각만... 막상 작업을 할 때는 작업에 몰두해버려서 잊어버리고 만다ㅠ 이래서 시야를 키워야 하고 나무보다 숲을 보는 연습을 끊임없이 해야 하는구나 싶었다.