Week 4

2024.11.13(Wed)

• 프로퍼티 #2(불린, 인스턴스 스왑)

2024.11.15(Fri)

• 버튼 컴포넌트 세트

2024.11.18(Mon)

• 스타일 라이브러리

10일차(2024.11.13)

개념 정리

Property(속성) 기능

Property는 컴포넌트 내에서 특정 속성을 조정할 수 있는 기능. 텍스트, 아이콘, 색상, 레이아웃 등을 사용자 정의할 수 있어, 컴포넌트를 다양한 상황에서 재사용할 때 매우 유용.

• Text 텍스트 - 텍스트 변경
  ▪︎ 컴포넌트의 텍스트를 개별 인스턴스마다 다르게 설정 가능
  ▪︎ 버튼이나 라벨의 텍스트를 상황에 맞게 빠르게 수정
  ex)
  버튼 텍스트를 "로그인", "회원가입" 등으로 변경 가능

• Boolean 불리언 - 온앤오프 (아이콘/화살표 있고 없음)
  ▪︎ 요소의 표시/숨김 설정, 특정 아이콘이나 배경의 표시 여부
  ▪︎ 예를 들어 체크박스 컴포넌트에서 체크 아이콘을 보여주거나 숨기는 기능을 쉽게 구현 가능
  ex)
  체크박스 상태: 체크 표시 유무를 Boolean으로 설정

• Instance swap - 인스턴스 스왑 (아이콘변경)
  ▪︎ 컴포넌트 내 특정 요소를 다른 컴포넌트로 교체
  ▪︎ 예를 들어 아이콘 버튼 컴포넌트에서 아이콘만 교체하여 다양한 아이콘 버튼 제작 가능
  ex)
  버튼 아이콘을 '검색'에서 '닫기'로 교체

과제

요구사항

• 컴포넌트안에 속성(property)를 추가하여 화면을 제작해볼 것

실습과정 및 결과

최종 결과. 이날은 필수 예제밖에 못했다.

대중교통에 대한 버튼을 각각 property를 부여하여 설정. instance도 설정하여 아이콘을 바꿀 수 있음.

카드 콘텐츠도 제목과 거리에 대한 부분을 텍스트 property로 설정

회고

이번 프로젝트에서 큰 어려움은 없었지만, 아이콘 선택이 여전히 쉽지 않았다. 화면과 잘 어우러지는 아이콘을 찾는 일은 생각만큼 간단하지 않았다. 작업을 시작하기 전에는 "적합한 아이콘을 금방 찾을 수 있겠지"라고 생각했지만, 막상 적용해보면 전체적인 화면과 어울리지 않는 경우가 많았다. 결국 여러 아이콘을 시도해 보며 조화를 찾는 과정이 반복됐다. 작은 디테일이 전체 디자인의 완성도를 결정짓는다는 점을 다시 한번 실감했다.

또 하나 느낀 점은 Figma의 빈번한 업데이트다. 최근 UI가 미묘하게 변경되거나 위치가 이동하는 걸 자주 체감했다. 이러한 변화가 사용성을 개선하려는 의도라는 건 알지만, 가끔은 오히려 이전보다 더 불편한 UX로 느껴질 때도 있었다. 익숙한 기능이 갑자기 사라지거나, 접근 방식이 변경되면 적응하는 데 시간이 걸린다. 이런 상황이 반복되면서 약간의 불편함과 짜증을 느끼기도 했다.

특히 텍스트 관련 프로퍼티 설정에서 변화가 두드러졌다. 새로운 depth가 추가되면서 기능은 더 세분화되었지만, 실제 작업에서는 이 정도로 세밀한 설정이 과연 필요할까? 라는 의문이 들기도 했다. 그러나 변화를 수용하고 적응하는 것이 디자이너로서의 필수 역량임을 다시 한번 깨달았다. 새로운 기능이 익숙해지면 생산성을 높이는 데 기여할 수도 있으니, 앞으로도 열린 마음으로 변화를 받아들이려 한다.

11일차(2024.11.15)

개념 정리

버튼 type과 상태 정리

* 컬러 스타일

• 컬러 스타일 뒤에 붙는 숫자는 보통 명도에 의해서 구분되는데,900이 어둡고 0으로 갈수록 밝아짐 (구글 material design)
• 하지만 회사나 디자이너 개인에 의해서 지정하는 부분이기 때문에 반드시 따라야 하는 규칙은 아님

시멘틱컬러(Sementic)

• 영어로 직역하자면, 의미론적이라는 뜻으로 사용목적에 따라 색상이름을 부여하는것
• 예를들어 Blue500이라는 명칭대신 Primary 등으로 특별한 이름으로 지정

과제

요구사항

• 버튼을 type, 상태 별로 제작
• instance 스왑과 boolean property 속성도 포함하여 제작할 것

실습과정 및 결과

최종 결과

팀원이 올린 티니핑 MBTI를 통해 내 시그니처가 되어버린 캐릭터(?)를 활용하여 버튼 색을 primary color로 선정했다.

버튼 컴포넌트에 대해 각각의 property를 부여했다.

적용된 property를 바탕으로 각각의 버튼을 제작했다.

회고

이번 시간은 별도로 앱 화면을 만드는 Task가 없어 빠르게 마무리할 수 있었다. 하지만 아쉬운 점도 있었다. 상태값(State) 에 대한 정의가 앱과 웹에서 다르게 적용되는 부분이 있는데, 이 점을 조금 더 깊이 다뤄줬으면 좋겠다고 생각했다. 상태값의 차이점은 실제 프로젝트에서도 자주 마주치는 문제이기 때문에, 이를 명확히 이해하는 것이 중요하다고 느꼈다.

또한 type의 개념도 다소 아쉬웠다. 수업에서는 type이 강조라는 의미로 다뤄졌지만, 사실 이것은 단순히 중요도를 나타내는 것이 아니라 종류나 분류에 더 가깝다. 물론 중요도에 따라 우선순위가 달라질 수 있겠지만, 어떤 기준에서 중요하며, 구체적으로 언제 어떤 type을 사용해야 하는지에 대한 명확한 설명이 부족하다고 느꼈다.

이런 아쉬움들로 인해 가끔 수업을 들으며 혼란스러운 순간들이 존재한다. 어쩌면 내가 Figma에 대해 이미 어느 정도 알고 있어서 스스로 기준을 더 높게 설정한 건 아닐까 하는 생각도 들었다. 그러나 이런 혼란은 배움의 과정에서 자연스러운 부분이라고 받아들이고, 앞으로 더욱 적극적으로 질문을 던지며 부족한 부분을 보완해 나가야겠다고 다짐했다.

(+상호존중 에티켓 강의 내용 및 회고)

이날 오후 프로젝트 수업을 진행하기 전 1시간 정도 상호존중 에티켓 강의를 들었다. 처음에는 단순히 1시간 정도 듣고 끝나는, 다소 형식적인 강의일 거라 생각했지만, 강의 내용은 실생활에서 꼭 필요한 매너와 조직 내에서의 행동 방식을 다루며 깊은 인사이트를 제공했다. 특히 강사님이 유머와 생동감 있는 전달 방식으로 강의하셔서, 평소에는 무겁게 느껴질 수 있는 주제들도 가볍고 즐겁게 받아들일 수 있었다. 강의가 조금 더 길었으면 좋겠다고 느낄 정도로 아쉬움이 남았다.

강의는 여러 핵심 주제를 다뤘다. 먼저, 표정과 인사의 중요성에 대해 다루면서 존중의 태도가 상대방에게 어떤 영향을 미치는지를 강조했다. 또 시간엄수와 관련해서는, 시간을 지키지 않았을 때 발생할 수 있는 부정적인 결과를 말씀하시며, 지각 시 미리 사과하는 것이 얼마나 중요한지 다시 한번 깨달았다. 시간 준수는 단순히 개인의 문제가 아니라 팀 전체의 성과에까지 영향을 미친다는 말을 듣고 지각 안하게 조심해야겠다는 생각을 상기했다.

커뮤니케이션 스킬 부분에서는 'I-message(나 전달 화법)'이라는 개념이 소개되었다. 이는 사실(fact), 감정(feeling), 바람(want) 의 순서로 자신의 생각을 전달하는 방식으로, 상대방을 비난하거나 방어적으로 만들지 않고 효과적으로 대화를 이끌어가는 데 유용한 기법이었다. 또한, 부정어와 긍정어의 차이에 대해서도 배웠는데, 부정어는 상대방을 혼내는 듯한 인상을 주는 반면, 긍정어는 상대방을 안내하는 느낌을 준다 는 점이 흥미로웠다. 이 부분은 앞으로 대화를 할 때 좀 더 신경 써야겠다고 다짐하게 만들었다.

특히 강의 후반부에서는 조직 갈등의 원인과 그 해결책에 대해 논의했다. 역할, 책임, 규칙이 명확하지 않을 때 갈등이 발생할 수 있다는 점을 강조하며, 팀 내에서 지켜야 할 규칙을 함께 만들어보는 활동을 했다. 이 과정에서 팀원들이 제시한 규칙들이 매우 흥미로웠고, 우리가 평소 간과했던 부분들이 많다는 것을 깨달았다. 이런 활동을 통해 규칙의 중요성을 다시 한번 느끼며, 조직 내에서 원활한 협업을 위해 어떤 점들을 개선해야 할지 고민해볼 수 있었다.

이번 강의는 단순히 예절을 배우는 자리가 아니라, 실제 조직 생활에서의 갈등 해소와 효과적인 커뮤니케이션을 위한 실질적인 지침을 제공하는 시간이었다. 특히 강의 내용이 이론에 그치지 않고, 내가 실제 상황에서 어떻게 행동해야 하는지에 대한 구체적인 방향성을 제시해주었다는 점이 인상 깊었다.

무엇보다도 강의를 들으며 나 자신을 돌아볼 기회가 되었던 것 같다. 평소에는 당연하다고 여겼던 시간 엄수나 인사, 말투 같은 부분들이 사실은 상대방과의 관계에 큰 영향을 미친다는 점을 새삼 깨달았다. 이와 함께, 팀워크와 조직 내 규칙의 중요성도 다시금 느꼈다. 결국 좋은 조직 문화를 만드는 것은 개개인의 매너와 책임감에서 시작된다는 것을 실감했다.

강사님의 유쾌한 강의 덕분에 내용이 귀에 쏙쏙 들어왔고, 무엇보다도 지루할 틈이 없었다. 덕분에 배운 내용을 보다 쉽게 내 것으로 만들 수 있었고, 앞으로도 자연스럽게 실천할 수 있을 것 같다. 이번 강의는 나에게 단순한 배움 그 이상이었다. 직장 내에서의 성숙한 태도와 소통의 중요성을 마음 깊이 새길 수 있었던 계기가 되었다.

우리 6팀이 만든 10계명!

12일차(2024.11.18)

개념 정리

스타일(Styles)

색상, 텍스트, 효과(그림자 등) 등의 디자인 요소를 재사용 가능하게 저장하고 관리할 수 있도록 하는 도구

스타일을 사용하는 이유
사용자 : UI디자인의 일관성 확보를 통해 일관된 사용자 경험 제공
공급자 : 유지보수 용이

1. Color

• 자주 사용하는 색상을 스타일로 저장하여, 나중에 쉽게 재사용 가능
• 브랜드 색상 팔레트를 색상 스타일로 정의하면, 디자이너나 팀원이 다양한 요소에서 동일한 색상을 쉽게 사용 가능

2. Text

• 폰트, 크기, 자간, 줄 간격 등을 포함하는 텍스트 스타일을 정의
• 텍스트 스타일을 설정하면, 글꼴, 크기, 색상 등을 변경할 때 모든 텍스트 요소에 일괄적으로 적용할 수 있음

3. Effect

• 그림자, 블러, 윤곽선 등의 시각적 효과를 스타일로 저장하고 적용 가능
• 일관된 효과를 여러 개체에 적용할 수 있어 디자인의 일관성을 유지 가능

4. Grid

• 그라디언트 색상이나 텍스처 패턴을 스타일로 정의하고, 디자인에 쉽게 재사용 가능
• 버튼이나 배경에 동일한 그라디언트를 쉽게 적용

그룹별 관리 방법

• 여러 스타일을 그룹으로 묶어 관리 가능 -> 스타일의 변경사항을 전체 프로젝트에 반영 가능
• 이름을 쓸 때 /슬래시로 관리한다.

과제

요구사항

• 해당 예제의 컬러, 텍스트, 그리드, 이펙트를 스타일에 등록하여 제작

실습과정 및 결과

최종 결과. 이날은 필수 예제할 시간밖에 없었다.

각 컴포넌트를 만들어 화면을 구성했다.

color shade와 styler 플러그인을 활용하여 폰트와 컬러 스타일을 제작했다.

회고

오늘은 지하철 파업으로 인한 연착 때문에 제 시간에 나왔고, 청량리에 수업시간 10분 전에 도착했음에도 불구하고 지각해버렸다. 그로 인해 강의 시작부터 집중력이 흐트러졌고, 생각보다 수업에 몰입하기 어려웠다. 하지만 강사님께서 월요일을 활기차게 시작하자는 의미로 커피를 쏘시기도 했고, 덕분에 분위기는 조금 더 편안해졌다. 그럼에도 불구하고 집중이 잘 되지 않아서 필수 예제만 진행하고 알파 예제까지는 진행하지 못한 점이 아쉬웠다.

필수 예제를 진행한 것만으로도 만족해야 할지, 아니면 아쉬운 마음을 갖고 더 많은 진도를 나가지 못한 점을 고민해야 할지 확실히 결론을 내리기 어려운 상황이었다. 그러나 오늘 수업에서 핵심적인 개념이나 기법을 다시 한 번 짚어보는 기회가 되었다는 점에서 기본기를 다지는 데 의미가 있었다고 생각한다.

다만, 이번 수업을 통해 내가 집중력과 시간을 더 효율적으로 관리하는 능력이 중요하다는 것을 다시 한 번 느꼈다. 특히 이런 예상치 못한 상황에서 어떻게 대처할지에 대한 생각을 미리 해두는 것이 필요하겠다는 교훈도 얻었다. 또한, 다음부터는 알파 예제도 더 신경 써서 시간을 분배하여 진행할 수 있도록 계획을 세워야겠다.

또 한 가지, 수업을 담당하는 매니저님이 계속 바뀌고 있다. 물론 나는 워낙에 새로운 사람에게도 친근하게 잘 다가가는 편이긴 하지만 매번 새로운 분께 적응하는 것이 아주 살짝은 어렵기도 하다. 한 번 정이 붙은 뒤 또 바뀌는 상황이 반복되다 보니, 나름대로 안정감을 느끼기 어려운 점도 있지만, 그럼에도 불구하고 바뀌신 매니저님들이 모두 친절하게 잘 대해주셔서 매번 감사함을 느낀다. 이런 상황 속에서도 그분들이 주는 배려와 지지를 받으며 더 열심히 해야겠다는 다짐을 하게 된다. 매번 새로운 분들과 만나게 되지만, 매니저님들이 주는 긍정적인 에너지를 통해 내가 해야 할 일에 집중하려고 하고 있다. 앞으로도 변화 속에서 적응하고, 더 나은 결과를 만들어 나갈 수 있도록 노력하자고 다짐하게 된다.

이처럼 예상치 못한 변수들이 생기곤 하지만, 그만큼 더 많은 경험을 쌓을 수 있고, 이런 작은 일들이 나의 성장에 중요한 요소로 작용한다는 생각이 든다. 다음에는 조금 더 체계적으로 준비하고, 예기치 못한 상황에서도 효율적으로 시간을 활용할 수 있는 방법을 고민해봐야겠다.

강사님이 쏘신 커피와 새싹 대표님이 쏘신 도너츠! 오늘 먹부림 파티였다!

---

본 후기는 [스나이퍼팩토리x웅진씽크빅] UX/UI 실무 초격차 디자인 전문가 양성과정 (B-log) 리뷰로 작성 되었습니다.

#UXUI디자인전문가양성과정 #UXUI교육과정 #서울시청년취업사관학교 #새싹동대문캠퍼스 #SeSAC #스나이퍼팩토리 #웅진씽크빅 #UXUI디자이너 #디자이너교육 #디자이너인턴