Week 11

2025.01.06(Mon)

• 데스크리서치

  2025.01.08(Wed)

• 인터뷰 설계 및 브랜딩

  2025.01.10(Fri)

• 인터뷰 설계 및 브랜딩

TOPIK 한국어 능력시험 앱 개선 프로젝트: 첫 주 회고

지난주 금요일, 모든 이론 실습이 끝났고 기업 실무 프로젝트를 선택하는 자리가 마련됐다. 총 5개의 매력적인 프로젝트 중, 나는 '스펙스페이스'의 프로젝트를 선택했다. 이 프로젝트를 선택한 이유는 명확했다.

프로젝트 선택 배경과 기준

나는 아래의 3가지 기준을 바탕으로 프로젝트를 선택했다.

1. 내가 개선하거나 신규 설계를 자유롭게 할 수 있는가?
2. 멘토가 피드백을 얼마나 잘 제공하는가?
3. 이 프로젝트를 통해 얼마나 성장할 수 있는가?

이 기준을 적용했을 때, 스펙스페이스 프로젝트가 가장 매력적으로 느껴졌다. 대기업 프로젝트도 있었지만, 내가 원하는 도메인과는 거리가 있었고, 위 기준에 부합하지 않았다.

스펙스페이스 프로젝트 개요

스펙스페이스는 TOPIK 한국어 능력시험 교육 앱을 개선하는 프로젝트였다. 앱은 기본적인 UX/UI 구색은 갖춰져 있었지만, 외국인 사용자 인터뷰를 반영하지 않아 개선의 여지가 많았다. 주요 작업은 다음과 같았다:

• UX 개선과 신규 설계
• 로고와 캐릭터를 포함한 브랜딩 작업
• 외국인 학습자를 대상으로 한 인터뷰 설계

특히, 다국어 서비스를 제공할 계획을 가지고 있어 UX Writing과 해외 UX를 고려하는 데 좋은 경험이 될 것이라 판단했다.

팀 구성 및 첫 주의 활동

프로젝트 팀은 이전에 함께 작업했던 팀원들과 새롭게 합류한 팀원들로 구성됐다. 팀원들과 빠르게 인사를 나누고 협업을 시작했다. 첫 주에는 다음과 같은 작업을 진행했다.

• 멘토님과의 논의: 프로젝트 방향성과 주요 작업 계획을 수립했다.
• 시장 조사: 현재 TOPIK 교육 앱의 현황과 외국인의 학습 방식을 조사했다.
• 브랜딩 작업 준비: 로고와 캐릭터를 구상하며 초기 작업을 시작했다.
• 인터뷰 설계: 외국인 학습자를 대상으로 한 질문을 설계했다.

TOPIK 시험과 외국인의 학습 방식

TOPIK 시험 개요

TOPIK은 한국어 능력시험으로, 유형은 1급과 2급으로 나뉘며 점수에 따라 급수가 다르게 부여된다. 이 시험은 대학 입학, 취업, 결혼, 이민 등 다양한 목적으로 활용되고 있었다.

학습 방식의 한계

조사를 통해 대부분의 TOPIK 교재와 앱이 한국어 해설만 제공한다는 점을 알게 됐다. 이는 외국인 학습자들에게 큰 장벽이 될 수 있는 요소였다. 나는 모국어로 된 해설의 필요성을 가설로 추가하며 인터뷰 설계를 진행했다.

첫 주의 도전과 난제

첫 주는 여러 도전 과제와 난제가 있었다. 특히, 인터뷰 대상 섭외가 가장 어려웠다. 대학 입학 시즌이 겹치며 외국인 학생들이 바쁜 시기였기 때문이었다. 멘토님과 논의하며 새로운 방법을 모색했다. 강사님도 도움의 손길을 주신다고 하시고 우리도 있는 친구 없는 친구 다 찾아 외국인 친구를 찾고 있다.

시간과 계획이 부족해 빠듯한 일정 속에서 작업을 진행해야 했지만, 팀원들과 함께 해결 방법을 찾아가며 한 단계씩 나아갔다.

한 주를 돌아보며

첫 주는 약간 우왕좌왕하는 시간이었지만, 많은 것을 배울 수 있는 시간이었다. TOPIK 시험과 외국인의 학습 방식을 조금이나마 이해할 수 있었고, 팀원들과 협업하며 방향성을 정립해 나갈 수 있었다.

다음 주는 더 체계적으로 작업을 진행하고, 인터뷰 섭외 문제를 해결하기 위해 노력할 계획이다.
짧은 시간이지만 최선을 다해 도전을 이어가겠다.

UX/UI 에이전시 실무자 특강 후기: 실무의 깊이를 배우다

얼마 전 UX/UI 에이전시에서 연사님이 방문해 주셔서 특강을 진행해 주셨다. 실무에 기반한 생생한 이야기를 들을 수 있었던 뜻깊은 시간이었고, 개인적으로도 많은 배움을 얻은 자리였다(12월30일, 1월3일 이틀을 걸쳐 진행했지만 아쉽게도 1월3일은 아파서 특강을 못들었다ㅠㅠ)

특강은 우리가 맡게 될 프로젝트의 종류를 직무별로 나누어 설명하는 것으로 시작되었다. 디자이너, 기획자, 개발자가 각각 어떤 역할을 수행하며, 프로젝트 안에서 어떤 작업을 주로 맡는지 구체적으로 풀어주셨다. 특히, 실무에서 주의해야 할 점이나 문제를 실제로 어떻게 해결할 수 있는지에 대한 이야기는 학교나 일반적인 수업에서는 접하기 어려운 내용이라 굉장히 유익했다.

한 가지 아쉬웠던 점은 이런 특강이 단발성으로 끝나지 않고 정규 수업으로 진행되었으면 어땠을까 하는 점이다. 실무에 기반한 설명 덕분에 기획 실무 과정의 흐름과 개발 핸드오프 문서를 작성하는 방법 같은 실질적인 내용을 배울 수 있었기 때문이다. 우리가 이론으로만 배웠던 부분을 실무적인 관점에서 다루다 보니, 앞으로 프로젝트를 진행할 때 훨씬 더 현실감 있게 접근할 수 있을 거라는 확신이 들었다.

특강 이후에는 개인적으로 포트폴리오를 들고 가서 피드백을 받을 기회가 있었다. 이 과정에서 정말 많은 인사이트를 얻었다. 연사님은 포트폴리오의 구성 요소를 회사에서 원하는 JD(직무 설명서)나 회사의 규모와 맞춰야 한다고 강조하셨다. 어떤 장표를 넣고 뺄지를 결정하는 기준을 명확히 해야 한다는 점도 큰 배움이었다.

예를 들어, 디자인 시스템에 대한 장표를 넣는 경우를 들며 구체적인 예시를 들어주셨다. 단순히 디자인 시스템을 설계한 경험을 나열하는 것은 효과적이지 않다고 하셨다. 만약 디자인 시스템을 통해 실질적인 성과를 낸 경험이 없다면, 또는 기존에 없는 독창적인 컴포넌트를 디자인한 사례가 없다면, 디자인 시스템 장표는 굳이 포함하지 않는 것이 좋다는 조언이었다. 연사님은 실무 레퍼런스를 직접 보여주시며 왜 이런 선택이 필요한지를 설명해 주셨다. 덕분에 단순히 포트폴리오를 꾸미는 것이 아니라, 회사가 원하는 방향성을 이해하고 그에 맞게 전략적으로 접근하는 방법을 배울 수 있었다.

이번 특강을 통해 느낀 가장 큰 점은 "실무"와 "이론"의 간극을 메우는 것이 얼마나 중요한지였다. 학교에서 배운 이론도 중요하지만, 그것을 실제 업무 상황에 어떻게 적용할 것인지에 대한 고민이 필요하다는 사실을 절실히 깨달았다. 앞으로도 실무적인 감각을 키우기 위해 다양한 시도를 해볼 생각이다.

이 특강은 단순한 지식 전달을 넘어 내가 어떤 디자이너로 성장하고 싶은지 다시 한번 고민하게 해준 계기가 되었다. 연사님의 현실적이고 구체적인 조언들이 앞으로의 진로와 준비 과정에 큰 도움이 될 것 같다.

Week 9

2024.12.18(Wed)

• 디자인 토큰 설정 및 UI 디자인

  2024.12.20(Fri)

• UI 디자인 및 프로토타입 준비, 발표장표 제작

  2024.12.23(Mon)

• 최종발표

24일차(2024.12.18)

각 Task 실습

실습과정 및 결과

회고

다른 팀과 함께 Maze 설문조사를 진행하면서, 우리가 놓쳤던 부분들을 돌아볼 기회가 있었다. 가장 먼저 아차 싶었던 점은 Flow를 지나치게 단순화했던 부분이었다. 물론, Flow가 정해져 있기는 했지만, 사용자에게 보여줘야 할 정보가 많다 보니, Flow를 간소화하지 않으면 사용자가 도중에 이탈할 가능성이 크다고 판단했다. 실제로, 강사님께 사전에 테스트를 요청했을 때도 우리가 의도했던 Task를 수행하지 못하시고 혼란스러워하는 모습을 보며 Flow의 간소화가 꼭 필요하다는 것을 다시 한 번 깨달았다.

이에 따라, Flow를 단순화하는 동시에 개선된 화면을 A/B 테스트로 검증하는 작업을 추가했다. 개선된 화면과 기존 화면 중 가시성과 정보의 직관성 측면에서 어떤 것이 더 나은지 선택하게 하는 질문들을 설문에 포함시켰다. 결과적으로, A/B 테스트는 기대했던 대로 직관적인 결과를 도출했지만, 이것이 우리가 확인해야 할 모든 것을 보여준 것은 아니었다.

간과했던 부분: 필터 설정 돌아보니, 우리가 진정으로 확인했어야 할 부분은 필터 설정과 필터 내부 항목이었다. Maze는 Flow 수행 데이터를 기반으로 히트맵을 제공하는 강력한 분석 도구다. 그런데 우리가 설문에서 가장 중점적으로 개선했던 필터 설정 부분은, Figma로 프로토타입을 설계하는 과정에서 다소 제약이 있었고, 이를 A/B 테스트에만 의존해 검증하려 했다. 하지만 필터 변경의 실제 사용 만족도를 확인하려면, 사용자가 직접 필터를 설정하고 활용해보는 경험이 필요하다. 이 부분을 Flow로 충분히 담아내지 못한 점이 굉장히 아쉬웠다.

사실 더 많은 시간이 있었다면, 기능별로 다양한 개선 방안을 논의해보고 테스트했을 것이다. 하지만 제한된 시간 속에서는 우리가 설계했던 질문들과 가설 검증에 집중할 수밖에 없었다. 현재는 기존 질문을 바탕으로 가설이 검증되었는지 확인하고, 필요하다면 추가 검증을 하거나 가설을 재수립할 계획이다. 다만, 가설 자체를 크게 변경하거나 다시 정의해야 할 가능성은 적다.

지금의 상황에서는 중요한 것은 우리가 맞는 방향으로 가고 있는지를 지속적으로 점검하는 것이다. 설문조사와 테스트는 사용자 경험의 개선을 위한 중요한 과정이지만, 그 안에서도 놓치고 있는 부분이 무엇인지, 한 단계 더 나아갈 방법은 없는지를 고민해야 한다는 것을 이번 작업을 통해 깊이 느꼈다.

25일차(2024.12.20)

각 Task 실습

실습과정 및 결과

회고

결과값을 어떻게 발표 자료에 효과적으로 담아낼지 고민하면서, 우리는 메인 가설 두 가지와 이를 검증하기 위한 질문들을 어떻게 장표에 배치할지 머리를 쥐어짜냈다. 발표 자료를 구성하는 작업이 단순히 데이터와 디자인을 나열하는 것이 아니라, 논리적인 흐름을 만들고 시각적으로 설득력 있는 구조를 설계하는 일임을 실감했다.

특히, Flow 설계와 관련된 가설 중 하나였던 ‘검수완료’ 기능 추가에 대해 사용자가 이를 충분히 인지하지 못한 사례가 많다는 점이 확인되었다. 이 부분은 추가 검증이 필요했지만, 시간을 고려했을 때 Maze 설계를 다시 진행해야 하는가?라는 딜레마에 빠지게 되었다.

이 상황에서 도움을 요청하자, 강사님은 설계 페이지를 추가하여 우리가 진행한 A/B 테스트, 관찰, 설문조사 과정을 명확히 보여줄 것을 제안했다. 페이지는 설계, 검증된 가설, 실패한 가설 순으로 구성하고, 큰 가설은 Task로 세분화하여 더 구체적으로 표현하라고 조언하셨다. 특히, 실패한 가설은 컬러나 시각적인 요소로 명확히 강조하고, 수정 및 개선된 내용을 담은 와이어프레임을 포함할 것을 강조했다. 또한, 시간이 촉박하다면 UT(User Test)를 다시 진행하기보다는 우리가 문제를 발견하고 이를 개선한 과정을 설득력 있게 전달하는 데 초점을 맞추라고 피드백을 주셨다.

강사님의 피드백을 바탕으로, UT를 한 번 더 진행할지를 고민했지만, 시간적 한계로 인해 최대한 ‘검수완료’ 태그 기능의 인지도를 높이는 방향으로 디자인 개선에 집중하기로 했다.

아쉬움이 남았지만, 이번 발표 자료의 목적은 우리가 발견한 문제를 어떻게 분석하고, 수정 및 개선 과정을 거쳤는지를 설득력 있게 전달하는 데 있다는 점을 재확인하며, 모든 작업에 속도를 냈다. 결국, 발표 자료는 단순한 데이터나 시각적 디자인의 나열이 아니라, 우리가 직면했던 문제를 해결해나가는 이야기를 효과적으로 전달하는 도구임을 다시금 깨닫는 순간이었다.

26일차(2024.12.23)

프로젝트 학습 내용

전달(Output)-GUI

GUI : Graphical User Interface 그래픽 요소를 통해 사용자가 사물과 상호 작용 할 수 있게 해주는 접점

• 이전에는 DOS(Disc Operating System) 코드로 컴퓨터와 상호작용하여 프로그램언어를 모르면, 상호작용이 어려웠다면, 화면이 나오며, 아이콘, 레이어 등 그래픽요소와 마우스 클릭을 통해 상호작용하게 되었다.

디자인 컨셉

어떤 경험의 이미지를 제공할 것인가를 정리하는 단계

• 목표로 정한 경험에 부합하는 디자인메타포를 제시해야한다.
• 이때 리서치를 통해 얻은 인사이트를 토대로 논리적으로 컨셉을 풀어간다. (ex. 당근-온도계 / 번개장터-숫자)
• 컨셉은 너무 광범위하거나, 추상적이여서는 시각적요소를 이끌어 내기어렵기때문에 비정형의 ‘마음’, ‘따뜻함‘ 보다는 ‘난로’, ‘온도계’ 정형의 요소를 제안한다.

디자인 무드보드

컨셉을 표현할 수 있는 형태, 커럴, 폰트, 재질, 레이아웃, 추상적 느낌등의 이미지를 한자리에 모은 보드

• 무드보드는 분위기를 표현하는 한장의 보드로, 이미지, 텍스트, 사진 등 영감을 주는 자료 들을 콜라주하여, 디자인하고자 하는 컨셉의 분위기를 표현한다.
• 주로 브랜딩 디자인과정에서 주로 이루어지지만, UI/UX디자인, 패션디자인, 인테리어 등 다양한 디자인프로세스에 유용하게 씌인다.
• 주의할점 : UI화면은 넣지 않도록 한다. 해당 느낌으로 디자인이 굳어질 수 있다.

  각 Task 실습

실습과정 및 결과

회고

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

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

Week 9

2024.12.18(Wed)

• 토큰 네이밍

  2024.12.20(Fri)

• 목업 제작

  2024.12.23(Mon)

• (최종발표)포트폴리오 정리

25일차(2024.12.18)

개념 정리

디자인토큰이란?

컬러, 텍스트, 라운드값, 간격 등 디자인을 할때 공통적으로 반복되는 요소들의 값을 규칙(시스템)에 따라 정리한 것

• 계층구조에 따라 속성으로 토큰네이밍을 짜고, 베리어블과 스타일라이브러리를 이용하여 참조하며 계층구조 시스템을 만든다.

26일차(2024.12.20)

개념 정리

과제

요구사항

• 페이지를 따로 만든 후 베리어블을 통해 디자인 토큰을 설정하여 컴포넌트를 만들어볼것

실습과정 및 결과

오늘은 많이 하진 못했다...ㅠㅠ

28일차(2024.12.23)

개념 정리

라이브러리 퍼블리싱이란?

디자인시스템 에셋들을 디자인시안파일에 가져오는 것

• 디자인시스템파일과 디자인시안파일을 함께 두면, 어떤것이 시스템파일이고, 어떤것이 디자인시안파일인지 혼동할 수 있음(나는 구분할 수 있다고 하여도, 협업할때 혼동될 수 있음)
• 이때 디자인시스템 에셋들을 디자인시안파일에 가져오는 것이 라이브러리퍼블리싱

라이브러리 퍼블리싱 특징

• 디자인시스템파일의 라이브러리를 퍼블리싱하여 여러 시안에 뿌려서 사용가능
• 디자인시스템파일-> 라이브러리 내보내기(Publish)
• 디자인시안파일-> 라이브러리 가져오기(Add to)
• 디자인시스템파일을 업데이트 하였다면, 전체 시안에서도 업데이트 가능
• 자동으로 연동되지 않으며, 라이브러리 업데이트 필수

전체 회고

이번 한 주는 프로젝트 막바지와 강의 과제가 겹치면서 많은 것을 놓치고 간다는 아쉬움이 남는 시간이었다. 발표 자료 준비와 프로젝트 작업이 점점 더 큰 비중을 차지하다 보니, 오전 수업 시간에도 틈틈이 작업을 이어가야 했고, 강사님이 내주신 과제들을 제대로 수행하지 못했다. 과제 자체가 시간 내에 해결하기 조금 빠듯한 경우도 있었고, 스스로도 여유를 갖고 해결할 여건이 부족했던 점이 아쉽다.

그럼에도 불구하고, 강의는 하나도 놓치지 않으려 했다. 실무 준비에 정말 필요한 내용들이 담겨 있었기 때문이다. 이번 주 가장 기억에 남는 부분은 디자인 토큰이라는 개념이었다. 이전에도 디자인 토큰이라는 단어는 들어봤지만, 이번 강의를 통해 비로소 제대로 이해하게 되었다. 디자인 토큰은 공통적으로 반복되는 요소들의 값을 규칙(시스템)에 따라 정리한 것이라는 점이 핵심인데, 이를 베리어블(variable)로 활용해 작업하는 구체적인 방법까지 배운 점이 정말 인상 깊었다.

피그마를 오래 사용하면서도 이런 부분은 간과하고 넘어갔던 터라, 실무를 준비하면서 얼마나 중요한지 다시 한번 깨닫게 되었다. 특히, 강의 내용을 들으며 어떤 부분을 중점적으로 고려하고 작업해야 할지 꼼꼼히 메모했다. 한 가지 아쉬웠던 점이라면, 베리어블이나 프로퍼티 같은 그룹핑 작업 시 네이밍을 어떻게 하면 효과적으로 할 수 있을지에 대한 언급이 부족했던 것이다. 물론 회사마다 다를 수 있겠지만, 대체적으로 통용되는 가이드라인이나 정형화된 예시를 공유해주셨다면 더욱 도움이 되었을 것 같다.

이번 주는 갑작스럽게 면접과 면접과제까지 있었던 터라 몸과 마음이 바쁘고 조금은 지쳤던 시간이었지만, 강의를 통해 배우는 과정 자체가 여전히 유익하고 즐겁다. 부족했던 부분은 앞으로 더 열심히 보완해나가며, 최종 발표를 잘 준비해야겠다고 다짐하게 된다.

(+번외) 이번 주 수요일에는 간담회가 열렸다. 푸짐한 간식들이 준비되어 있었는데, 간식 자체도 좋았지만, 수강생들이 함께 친해질 수 있는 시간을 마련해준 세심한 배려에 더 큰 감동을 받았다. 새싹은 처음부터 시설과 커리큘럼이 뛰어났지만, 이렇게 수강생들의 의견을 반영하며 소통의 장을 만들어주는 모습을 보며 다시 한번 신뢰를 느꼈다. 취준생 입장에서 이런 따뜻한 배려는 정말 큰 힘이 된다.

게다가 중간평가에서 우수자로 선정되어 상품도 받았다. 사실 블로그 글을 쓴 것뿐인데 이렇게 인정받으니 기쁘기도 하고 뿌듯했다. 그런데 문제가 있었다. 상품으로 받은 스타벅스 기프티콘을 확인해보니, 처음엔 5,000원짜리라고 생각해서 화가 났다. "우수자로 뽑혔는데 이게 뭐야?"라는 생각이 들며 괜시리 불만을 표출했는데, 몇 시간 뒤 다시 확인해보니 기프티콘 카드가 두 장이었던 거다. 그리고 그중 하나는 무려 3만 원짜리였다! 내가 기존에 있던 카드를 혼동하여 착각한 건지 아니면 누군가 같은 카드를 넣어준 건지 모르겠지만, 내가 왜 그렇게 화를 냈나 싶어 솔직히 조금 민망했다.

이렇게 소소한 해프닝 덕분에 간담회는 더 기억에 남는 시간이 되었다. 앞으로는 너무 빠르게 불만을 내기보다 한 번 더 확인해보는 습관을 들여야겠다는 교훈도 얻었다😊

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

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

Week 8

2024.12.11(Wed)

• Userbility Test 결과 집계 및 분석

  2024.12.13(Fri)

• Userbility Test 분석 및 가설 검증 확인

  2024.12.16(Mon)

• 디자인 컨셉 및 무드보드 제작

21일차(2024.12.11)

각 Task 실습

실습과정 및 결과

회고

다른 팀과 함께 Maze 설문조사를 진행하면서, 우리가 놓쳤던 부분들을 돌아볼 기회가 있었다. 가장 먼저 아차 싶었던 점은 Flow를 지나치게 단순화했던 부분이었다. 물론, Flow가 정해져 있기는 했지만, 사용자에게 보여줘야 할 정보가 많다 보니, Flow를 간소화하지 않으면 사용자가 도중에 이탈할 가능성이 크다고 판단했다. 실제로, 강사님께 사전에 테스트를 요청했을 때도 우리가 의도했던 Task를 수행하지 못하시고 혼란스러워하는 모습을 보며 Flow의 간소화가 꼭 필요하다는 것을 다시 한 번 깨달았다.

이에 따라, Flow를 단순화하는 동시에 개선된 화면을 A/B 테스트로 검증하는 작업을 추가했다. 개선된 화면과 기존 화면 중 가시성과 정보의 직관성 측면에서 어떤 것이 더 나은지 선택하게 하는 질문들을 설문에 포함시켰다. 결과적으로, A/B 테스트는 기대했던 대로 직관적인 결과를 도출했지만, 이것이 우리가 확인해야 할 모든 것을 보여준 것은 아니었다.

간과했던 부분: 필터 설정 돌아보니, 우리가 진정으로 확인했어야 할 부분은 필터 설정과 필터 내부 항목이었다. Maze는 Flow 수행 데이터를 기반으로 히트맵을 제공하는 강력한 분석 도구다. 그런데 우리가 설문에서 가장 중점적으로 개선했던 필터 설정 부분은, Figma로 프로토타입을 설계하는 과정에서 다소 제약이 있었고, 이를 A/B 테스트에만 의존해 검증하려 했다. 하지만 필터 변경의 실제 사용 만족도를 확인하려면, 사용자가 직접 필터를 설정하고 활용해보는 경험이 필요하다. 이 부분을 Flow로 충분히 담아내지 못한 점이 굉장히 아쉬웠다.

사실 더 많은 시간이 있었다면, 기능별로 다양한 개선 방안을 논의해보고 테스트했을 것이다. 하지만 제한된 시간 속에서는 우리가 설계했던 질문들과 가설 검증에 집중할 수밖에 없었다. 현재는 기존 질문을 바탕으로 가설이 검증되었는지 확인하고, 필요하다면 추가 검증을 하거나 가설을 재수립할 계획이다. 다만, 가설 자체를 크게 변경하거나 다시 정의해야 할 가능성은 적다.

지금의 상황에서는 중요한 것은 우리가 맞는 방향으로 가고 있는지를 지속적으로 점검하는 것이다. 설문조사와 테스트는 사용자 경험의 개선을 위한 중요한 과정이지만, 그 안에서도 놓치고 있는 부분이 무엇인지, 한 단계 더 나아갈 방법은 없는지를 고민해야 한다는 것을 이번 작업을 통해 깊이 느꼈다.

22일차(2024.12.13)

각 Task 실습

실습과정 및 결과

회고

결과값을 어떻게 발표 자료에 효과적으로 담아낼지 고민하면서, 우리는 메인 가설 두 가지와 이를 검증하기 위한 질문들을 어떻게 장표에 배치할지 머리를 쥐어짜냈다. 발표 자료를 구성하는 작업이 단순히 데이터와 디자인을 나열하는 것이 아니라, 논리적인 흐름을 만들고 시각적으로 설득력 있는 구조를 설계하는 일임을 실감했다.

특히, Flow 설계와 관련된 가설 중 하나였던 ‘검수완료’ 기능 추가에 대해 사용자가 이를 충분히 인지하지 못한 사례가 많다는 점이 확인되었다. 이 부분은 추가 검증이 필요했지만, 시간을 고려했을 때 Maze 설계를 다시 진행해야 하는가?라는 딜레마에 빠지게 되었다.

이 상황에서 도움을 요청하자, 강사님은 설계 페이지를 추가하여 우리가 진행한 A/B 테스트, 관찰, 설문조사 과정을 명확히 보여줄 것을 제안했다. 페이지는 설계, 검증된 가설, 실패한 가설 순으로 구성하고, 큰 가설은 Task로 세분화하여 더 구체적으로 표현하라고 조언하셨다. 특히, 실패한 가설은 컬러나 시각적인 요소로 명확히 강조하고, 수정 및 개선된 내용을 담은 와이어프레임을 포함할 것을 강조했다. 또한, 시간이 촉박하다면 UT(User Test)를 다시 진행하기보다는 우리가 문제를 발견하고 이를 개선한 과정을 설득력 있게 전달하는 데 초점을 맞추라고 피드백을 주셨다.

강사님의 피드백을 바탕으로, UT를 한 번 더 진행할지를 고민했지만, 시간적 한계로 인해 최대한 ‘검수완료’ 태그 기능의 인지도를 높이는 방향으로 디자인 개선에 집중하기로 했다.

아쉬움이 남았지만, 이번 발표 자료의 목적은 우리가 발견한 문제를 어떻게 분석하고, 수정 및 개선 과정을 거쳤는지를 설득력 있게 전달하는 데 있다는 점을 재확인하며, 모든 작업에 속도를 냈다. 결국, 발표 자료는 단순한 데이터나 시각적 디자인의 나열이 아니라, 우리가 직면했던 문제를 해결해나가는 이야기를 효과적으로 전달하는 도구임을 다시금 깨닫는 순간이었다.

23일차(2024.12.16)

프로젝트 학습 내용

전달(Output)-GUI

GUI : Graphical User Interface 그래픽 요소를 통해 사용자가 사물과 상호 작용 할 수 있게 해주는 접점

• 이전에는 DOS(Disc Operating System) 코드로 컴퓨터와 상호작용하여 프로그램언어를 모르면, 상호작용이 어려웠다면, 화면이 나오며, 아이콘, 레이어 등 그래픽요소와 마우스 클릭을 통해 상호작용하게 되었다.

디자인 컨셉

어떤 경험의 이미지를 제공할 것인가를 정리하는 단계

• 목표로 정한 경험에 부합하는 디자인메타포를 제시해야한다.
• 이때 리서치를 통해 얻은 인사이트를 토대로 논리적으로 컨셉을 풀어간다. (ex. 당근-온도계 / 번개장터-숫자)
• 컨셉은 너무 광범위하거나, 추상적이여서는 시각적요소를 이끌어 내기어렵기때문에 비정형의 ‘마음’, ‘따뜻함‘ 보다는 ‘난로’, ‘온도계’ 정형의 요소를 제안한다.

디자인 무드보드

컨셉을 표현할 수 있는 형태, 커럴, 폰트, 재질, 레이아웃, 추상적 느낌등의 이미지를 한자리에 모은 보드

• 무드보드는 분위기를 표현하는 한장의 보드로, 이미지, 텍스트, 사진 등 영감을 주는 자료 들을 콜라주하여, 디자인하고자 하는 컨셉의 분위기를 표현한다.
• 주로 브랜딩 디자인과정에서 주로 이루어지지만, UI/UX디자인, 패션디자인, 인테리어 등 다양한 디자인프로세스에 유용하게 씌인다.
• 주의할점 : UI화면은 넣지 않도록 한다. 해당 느낌으로 디자인이 굳어질 수 있다.

  각 Task 실습

실습과정 및 결과

회고

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

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

Week 8

2024.12.11(Wed)

• 디자인 시스템

  2024.12.13(Fri)

• 디자인 토큰

  2024.12.16(Mon)

• 라이브러리 퍼블리싱

22일차(2024.12.11)

개념 정리

디자인 시스템이란?

디자인시스템 = 일관된 시스템

• 서비스의 목적에 맞도록, 일관되게 구성한 공유된 규칙
• 디자인을 할때 공통으로 사용하는 컬러, 폰트, 레이아웃, UI구성요소 등 일관된 집합을 두고 이를 어떻게 구성하는지 체계를 만든 것.

디자인 시스템의 장점

• 일관성 : 디자인 시스템은 여러프로젝트에 적용가능한 표준화된 구성요소를 기반으로 하기에, 디자인 일관성 유지할 수 있다.
• 시간단축 & 비용절감 & 생산성향상 : 재활용 가능한 컴포넌트를 통해 작업시간 단축하여 서비스를 시장에 빠르게 출시하여 테스트할 수 있으며, 생산성이 향상되어 더 적은 수의 디자이너가 많은 것을 만들 수 있다.
• 원활한 협업과 소통 : 공통된 시각 언어 리소스로, 협업시 이해관계자들의 소통을 도움을 준다.
• 쉬운 유지보수 : 개발에 필요한 리소스를 줄이고, 유지보수에 도움을 주어 리스크 최소화 (인하우스/큰구모의 기업에서 꼭 필요한 개념)
• 확장성 : 서비스를 확장할때 더 빠르고, 오류는 적은 디자인을 만들 수 있다.

디자인 시스템 안에 들어가야 하는 내용

1. 컬러
2. 텍스트
3. 레이아웃
4. 컴포넌트
5. 아이콘
6. 디자인토큰

디자인 시스템 제작 순서

1. 파운데이션 (컬러, 폰트, 레이아웃) 컬러, 둥글기, 간격, 효과, 규격 등 컴포넌트 구성요소들의 기반을 구축

2. 컴포넌트 제작 파운데이션을 토대로 일정한 규칙을 가진 컴포넌트 생성

3. 템플릿 제작 컴포넌트를 조합에 서비스에 반영할 UI이 설계 확장할 수 있도록 구성하여, 다양한 상황에 쉽게 활용할 수 있도록 제작

과제

요구사항

• 현재 진행중인 프로젝트의 디자인 시스템을 구성해볼것

실습과정 및 결과

23일차(2024.12.13)

개념 정리

디자인 토큰이란?

컬러, 텍스트, 라운드값, 간격 등 디자인을 할때 공통적으로 반복되는 요소들의 값을 규칙(시스템)에 따라 정리한 것

• 헥사코드만 있으면, 다른사람(개발자, 기획자, 마케터)들은 어디에 어떻게 사용되는지 모른다.
• ex. 버튼을 만들때 배경에 들어가는 메일컬러인 레드에요 -> 디자인 토큰으로 정리 가능
• *토큰 : 실질적인 현금의 값 외에 가치를 부여한 것
• 규칙(시스템)은 베리어블을 사용하여 정리

과제

요구사항

• 페이지를 따로 만든 후 베리어블을 통해 디자인 토큰을 설정하여 컴포넌트를 만들어볼것

실습과정 및 결과

오늘은 많이 하진 못했다...ㅠㅠ

24일차(2024.12.16)

개념 정리

라이브러리 퍼블리싱이란?

디자인시스템 에셋들을 디자인시안파일에 가져오는 것

• 디자인시스템파일과 디자인시안파일을 함께 두면, 어떤것이 시스템파일이고, 어떤것이 디자인시안파일인지 혼동할 수 있음(나는 구분할 수 있다고 하여도, 협업할때 혼동될 수 있음)
• 이때 디자인시스템 에셋들을 디자인시안파일에 가져오는 것이 라이브러리퍼블리싱

라이브러리 퍼블리싱 특징

• 디자인시스템파일의 라이브러리를 퍼블리싱하여 여러 시안에 뿌려서 사용가능
• 디자인시스템파일-> 라이브러리 내보내기(Publish)
• 디자인시안파일-> 라이브러리 가져오기(Add to)
• 디자인시스템파일을 업데이트 하였다면, 전체 시안에서도 업데이트 가능
• 자동으로 연동되지 않으며, 라이브러리 업데이트 필수

전체 회고

이번 한 주는 프로젝트 막바지와 강의 과제가 겹치면서 많은 것을 놓치고 간다는 아쉬움이 남는 시간이었다. 발표 자료 준비와 프로젝트 작업이 점점 더 큰 비중을 차지하다 보니, 오전 수업 시간에도 틈틈이 작업을 이어가야 했고, 강사님이 내주신 과제들을 제대로 수행하지 못했다. 과제 자체가 시간 내에 해결하기 조금 빠듯한 경우도 있었고, 스스로도 여유를 갖고 해결할 여건이 부족했던 점이 아쉽다.

그럼에도 불구하고, 강의는 하나도 놓치지 않으려 했다. 실무 준비에 정말 필요한 내용들이 담겨 있었기 때문이다. 이번 주 가장 기억에 남는 부분은 디자인 토큰이라는 개념이었다. 이전에도 디자인 토큰이라는 단어는 들어봤지만, 이번 강의를 통해 비로소 제대로 이해하게 되었다. 디자인 토큰은 공통적으로 반복되는 요소들의 값을 규칙(시스템)에 따라 정리한 것이라는 점이 핵심인데, 이를 베리어블(variable)로 활용해 작업하는 구체적인 방법까지 배운 점이 정말 인상 깊었다.

피그마를 오래 사용하면서도 이런 부분은 간과하고 넘어갔던 터라, 실무를 준비하면서 얼마나 중요한지 다시 한번 깨닫게 되었다. 특히, 강의 내용을 들으며 어떤 부분을 중점적으로 고려하고 작업해야 할지 꼼꼼히 메모했다. 한 가지 아쉬웠던 점이라면, 베리어블이나 프로퍼티 같은 그룹핑 작업 시 네이밍을 어떻게 하면 효과적으로 할 수 있을지에 대한 언급이 부족했던 것이다. 물론 회사마다 다를 수 있겠지만, 대체적으로 통용되는 가이드라인이나 정형화된 예시를 공유해주셨다면 더욱 도움이 되었을 것 같다.

이번 주는 갑작스럽게 면접과 면접과제까지 있었던 터라 몸과 마음이 바쁘고 조금은 지쳤던 시간이었지만, 강의를 통해 배우는 과정 자체가 여전히 유익하고 즐겁다. 부족했던 부분은 앞으로 더 열심히 보완해나가며, 최종 발표를 잘 준비해야겠다고 다짐하게 된다.

(+번외) 이번 주 수요일에는 간담회가 열렸다. 푸짐한 간식들이 준비되어 있었는데, 간식 자체도 좋았지만, 수강생들이 함께 친해질 수 있는 시간을 마련해준 세심한 배려에 더 큰 감동을 받았다. 새싹은 처음부터 시설과 커리큘럼이 뛰어났지만, 이렇게 수강생들의 의견을 반영하며 소통의 장을 만들어주는 모습을 보며 다시 한번 신뢰를 느꼈다. 취준생 입장에서 이런 따뜻한 배려는 정말 큰 힘이 된다.

게다가 중간평가에서 우수자로 선정되어 상품도 받았다. 사실 블로그 글을 쓴 것뿐인데 이렇게 인정받으니 기쁘기도 하고 뿌듯했다. 그런데 문제가 있었다. 상품으로 받은 스타벅스 기프티콘을 확인해보니, 처음엔 5,000원짜리라고 생각해서 화가 났다. "우수자로 뽑혔는데 이게 뭐야?"라는 생각이 들며 괜시리 불만을 표출했는데, 몇 시간 뒤 다시 확인해보니 기프티콘 카드가 두 장이었던 거다. 그리고 그중 하나는 무려 3만 원짜리였다! 내가 기존에 있던 카드를 혼동하여 착각한 건지 아니면 누군가 같은 카드를 넣어준 건지 모르겠지만, 내가 왜 그렇게 화를 냈나 싶어 솔직히 조금 민망했다.

이렇게 소소한 해프닝 덕분에 간담회는 더 기억에 남는 시간이 되었다. 앞으로는 너무 빠르게 불만을 내기보다 한 번 더 확인해보는 습관을 들여야겠다는 교훈도 얻었다😊

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

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

회고 커뮤니티인 메모어와 과학기술원 회고 커뮤니티 아이겐벡터에서 활동을 하고 있지만 블로그로도 기록을 남겨놓으면 좋을 거 같아 이렇게 기록을 시작한다. 슬랙에만 남겨놓기에는 너무 아까운 나의 인생 기록들을 이렇게 블로그에도 남겨놓음으로써 내가 힘들 때마다 지난날을 돌아보며 성장한 나를 보며 힘을 내고, 또 한편으로는 내가 오만방자해졌을 때 지난 날의 나를 보고 겸손해지고 반성할 수 있는 그런 나를 만들어가고자 한다.

"회고 커뮤니티인 메모어" 와 "과학기술원 회고 커뮤니티 아이겐벡터" 에서 활동하면서, 나만의 삶을 기록으로 남겨두는 것의 중요성을 느꼈다. 그동안 슬랙에 짧은 글로 남기던 회고를 이제 블로그에도 기록하기로 결심했다. 이렇게 기록을 남기면 내가 힘들 때 스스로를 돌아보며 성장한 나를 보며 위안을 얻을 수 있을 것이고, 반대로 내가 자만하거나 방황할 때는 과거의 나를 보고 겸손함을 되찾는 계기가 될 것이다. 나의 회고 기록이 누군가에게 작은 동기부여가 될 수 있으면 좋겠다.

2024년 12월 2주차 회고

솔직함보다 똑똑함을 어필하기

오랜만에 만난 친구와 밥을 먹으며 자연스럽게 취업 이야기가 나왔다. 면접까지는 이어지는데 왜 그 뒤의 결과가 좋지 않을지에 대한 고민을 털어놨다. 그 친구는 내가 5월부터 상경해 고군분투하며 힘들었던 시간을 잘 알고 있었기에, 내 이야기를 진지하게 들어줬다. 최근 석사 논문 디펜스를 마쳤다는 친구는 이제 취업할지, 아니면 현재 진행 중인 창업을 이어갈지 고민 중이라고 했다.

그 친구도 백엔드 개발, 데이터 분석, 창업 등 제너럴리스트로써의 삶을 산 사람인지라 나의 고민이 정말 공감이 많이 간다고 했다. 그런 고민으로 많은 커피챗을 하며 사람들을 만나보며 인사이트를 얻고 있다고 했다. 그러던 중 그 친구가 해준 한마디가 머리를 맑게 깨우는 느낌을 주었다.

"솔직함도 중요하지만, 내가 커피챗을 하면서 느낀 바로는 면접에서는 네가 일을 잘하고 똑똑하다는 걸 어필하는 게 더 중요한 것 같아."

그 말을 듣고 뒤통수를 맞은 듯한 기분이 들었다. 나는 그동안 내 커리어와 경험을 진솔하게 풀어내는 데에만 몰두했다. 기계공학을 전공하며 창업에 눈을 뜨게 된 계기, 창업 커뮤니티 운영과 마케팅 경험, 중소기업에서의 기술영업 등 나의 다양한 경험들을 '스토리'로 엮는 데 집중했다. 하지만 돌이켜보면, 회사 입장에서는 불필요한 경력보다는 '필요한 경험과 역량'이 무엇인지 그리고 그 역량을 회사의 업무와 어떻게 연결해 활용할 것인지에 더 관심이 있을 수밖에 없다. 나는 지금까지 면접에서 제너럴리스트로서 다양한 경험을 보여주는 데 집중했지만, 정작 프로덕트 디자이너라는 직무를 중심으로 내 강점과 적합성을 어필하는 방법에 대해서는 고민이 부족했던 것 같다.

나는 제너럴리스트로서 다채로운 경험을 보여주는 것에 집중했지만, 정작 프로덕트 디자이너라는 직무에 필요한 강점과 적합성을 구체적으로 어필하지 못했던 것이다. 이제는 내 경험의 '폭'보다 직무와의 연결성과 실질적인 전문성을 강조해야겠다는 생각이 들었다.

친구의 조언 덕분에 앞으로는 단순히 솔직한 모습을 보여주는 데서 그치지 않고, 내 강점이 직무와 회사에 적합하다는 신뢰를 줄 수 있는 '똑똑함'을 어필하는 방향으로 나아가려고 한다.

나 자신에 대한 기록 멈추지 않기

이번 주말에는 디자이너 커뮤니티 프롬에서 주최하는 '버킷리스트 워크숍'에 참여했다. 오랜만에 열린 행사라 설레는 마음으로 참석했는데, 반가운 얼굴도 있었고 새로운 인연도 생겨 즐거운 시간이었다. 여담이지만, 과거에 내 포트폴리오 리뷰 세션에 참관했던 분이 다가와 "3번이나 리뷰세션에 참여한 점이 정말 멋지다"며 인사를 건넸다. 부족한 나에게 관심을 가져주는 그 말 한마디가 얼마나 큰 힘이 되었는지 모른다. 동시에 내가 누군가에게 동기부여가 될 수 있다는 사실에 다시금 더 열심히 살아야겠다는 다짐을 했다.

이 워크숍은 한 해 동안 내가 성취했던 일, 기쁨을 느꼈던 일, 도전했던 일을 정리하는 활동으로 시작됐다. 그리고 이를 바탕으로 3년 후 내가 원하는 모습과 이를 위해 지금 해야 할 일을 적어보는 시간을 가졌다. 막연히 머릿속에서만 떠돌던 생각들을 글로 정리하다 보니 내가 진정으로 무엇을 원하는지 명확히 이해할 수 있었다.

특히, 지난 한 해를 되돌아보며 내가 생각보다 많은 것을 이루어냈다는 사실을 깨달았다. 부모님을 설득해 상경하며 새로운 커리어를 시작한 일, 수많은 면접을 보며 울고 웃었던 일, 그 과정에서 소중한 인연을 만나고 성장했던 일들. 내 노력과 도전이 지금의 나를 만들어왔다는 걸 떠올리니 스스로가 자랑스럽기도 했다.

이제는 매주 회고를 쓰는 습관을 넘어, 내가 어떤 사람인지 깊이 탐구하고 나의 여정을 기록으로 남기는 시간을 더 꾸준히 가지려 한다. 이런 과정이 나를 더 단단하게 만들고, 앞으로의 선택에도 큰 도움을 줄 것이라고 믿는다.

매사에 지나친 기대하지 않기

올해 왜 이렇게 힘들었는지 곰곰이 돌아보니, 내가 기대했던 일이 잘 풀리지 않았던 경험 때문인 것 같다. 큰 프로젝트에 참여했지만 나의 부족함과 정기회의시간의 부족, 시간 관리 등의 복합적인 문제들로 인해 예정대로 끝날거 같던 프로젝트가 제대로 마무리되지 않았고, 내가 진심으로 다가갔던 인간관계도 결국 상대방의 이기적인 태도로 인해 큰 실망감을 안겨줬다. 그리고 무엇보다도 취업 과정에서 받은 상처가 가장 컸다. 최종합격이 유력하다는 뉘앙스를 풍기던 회사에서 불합격 통보를 받았을 때 느꼈던 허탈감은 말로 다 할 수 없다.

회사 지원도 많이 하고 떨어져 본 경험도 많지만, 거절에 익숙해지는 건 여전히 쉽지 않다. 특히, 내가 준 만큼 상대방도 나에게 비슷한 방식으로 보답하길 기대했기 때문이 아닐까 싶다. 요즘에는 그런 기대를 줄이려고 노력하고 있다. 기대가 크면 그만큼 실망감도 크다는 걸 몸소 배웠다. 내가 아는 정보를 나누거나 도움을 줄 때는 상대방이 그 가치를 당연하게 여기지 않길 바랐지만, 가끔 상대가 그러는 모습을 볼 때면 내 마음이 싸늘해지고 인간관계에 대한 회의감이 든다. 나는 여전히 내가 가진 것을 기꺼이 나누는 사람이 되고 싶지만, 더 이상 상대에게 큰 기대를 걸지는 않으려고 한다. 기대치를 조정하는 법을 배우고 있다. 큰 기대를 하지 않으면 실망도 줄어든다. 그리고 때로는 예상치 못한 보답이 돌아올 때 더 큰 기쁨을 느낄 수 있다는 것을 깨달았다.

올해는 쉽지 않은 한 해였지만, 이런 경험을 통해 나를 더 단단하게 만들고 스스로를 위한 기대치를 새롭게 설정하는 계기로 삼으려 한다. 이제는 타인에게 기대를 거는 대신, 내가 만들어가는 작은 성취들에 집중하며 한 걸음씩 나아가려 한다.

Week 7

2024.12.04(Wed)

• Userbility Test 설계

  2024.12.06(Fri)

• Userbility Test 설계

  2024.12.09(Mon)

• Userbility Test 실행

19일차(2024.12.04)

프로젝트 학습 내용

사용성테스트(Userbility Test)

사용자에게 특정 과업을 수행하도록 과제(Task)를 부여한 뒤,그 일을 진행하는 과정(행동)을 관찰하는 방법

• 서비스 기획 초기의 사용성 테스트를 통해, 유저의 니즈와 사용성을 미리 확인하고 개선할 수 있다.
• 의도한 서비스 시나리오대로 유저가 행동하는지 아닌지 알 수 있음
• 필수적인 컨트롤 요소를 인지/이해/예측/실행 하는지 알 수 있음

사용자관찰조사와 사용성테스트의 차이

• 사용성테스트는 앞서 진행한 사용자관찰조사와 방법이 유사하지만 그 목표가 다르다.
• 사용자관찰조사는 타겟유저의 니즈, 타겟유저의 페인포인트 등에 목표가 맞춰져 있다면, 사용성테스트는 어느정도 제품이 완성되었을때, 사용성 개선을 목표로 진행한다.

각 Task 실습

실습과정 및 결과

회고

사용성 테스트를 진행하기 전, 어떤 방식으로 화면을 준비할지에 대한 고민이 많았다. 하이 피델리티 와이어프레임을 만든 후 테스트를 진행하고 본격적인 UI 디자인으로 넘어갈지, 아니면 조금 시간이 더 걸리더라도 처음부터 UI 디자인까지 완성한 상태에서 테스트를 진행할지 선택의 기로에 섰다.

결국 우리 팀은 시간적인 여유가 부족한 상황과 화면에 포함된 정보의 복잡성을 고려해, 바로 UI 디자인을 완성한 상태에서 사용성 테스트를 진행하기로 결정했다. 하이 피델리티를 거친 후 UI 디자인을 다시 제작하는 것은 시간적으로도, 작업 리스크 측면에서도 부담이 클 것이라 판단했다.

UI 디자인 과정에서는 예상했던 대로 어려움도 있었다. 컴포넌트를 체계적으로 구성하거나 폰트와 색상을 선택할 때 여러 번 수정을 거쳐야 했지만, 이전에 배운 지식을 적극적으로 활용하면서 점차 체계를 잡아나갈 수 있었다. 특히, 디자인을 실질적으로 구현하며 프로젝트를 진행하다 보니, 작은 디테일 하나하나가 얼마나 중요한지 몸소 깨닫게 되었다.

아직 사용성 테스트는 진행하지 못했지만, 이번 작업을 통해 협업의 중요성을 다시금 깨달았다. 팀원들과 소통하며 아이디어를 공유하고, 역할을 나눠 작업하는 과정에서 서로의 장점을 살릴 수 있었고, 예상치 못한 문제들도 빠르게 해결할 수 있었다. 이 경험은 단순히 UI 디자인을 넘어 앞으로의 협업 방식에 대해 많은 교훈을 준 것 같다.

앞으로 사용성 테스트를 진행하며 얻을 피드백을 통해 얼마나 더 나은 결과물을 만들어낼 수 있을지 기대된다.

20일차(2024.12.06)

각 Task 실습

실습과정 및 결과

회고

프로토타입을 만들면서 가장 고민됐던 건 Maze라는 사용성 테스트 툴을 어떻게 활용할지였다. 테스트의 목적이 여러 가지로 나뉘어 있었는데, 이를 하나의 flow로 합쳐 진행할지 아니면 목적에 따라 flow를 쪼개서 구성할지 팀원들과 논의가 길어졌다. 결국, 우리는 하나로 합치기로 결정했다. 가이드를 명확하게 제공하면 사용자들이 flow를 잘 이해하고 따라갈 수 있을 거라고 판단했기 때문이다.

하지만 생각처럼 간단하지는 않았다. 여러 목적을 하나의 flow에 담다 보니 자연스럽게 연결되게 만드는 게 쉽지 않았다. 어디서 시작하고 어떻게 끝낼지 정하는 과정에서 헷갈리기도 했고, 사용자들이 이 flow를 끝까지 문제없이 따라갈 수 있을지 걱정도 됐다.

특히, 중간에 불필요한 단계를 줄이면서도 우리가 의도한 테스트 목적이 잘 전달될 수 있게 설계해야 해서 몇 번이나 수정을 반복했다. 혼자였다면 훨씬 더 막막했을 것 같지만, 팀원들과 함께 의견을 나누고 보완하면서 점점 방향이 잡혀갔다.

이제 사용자들이 이 flow를 어떻게 받아들일지 확인하는 것만 남았다.

21일차(2024.12.09)

각 Task 실습

실습과정 및 결과

회고

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

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

Week 7

2024.12.04(Wed)

• 스마트애니메이션 & 스크롤

  2024.12.06(Fri)

• 스마트애니메이션 & Lottie

  2024.12.09(Mon)

• 클론디자인 & 플러그인

19일차(2024.12.04)

개념 정리

-

과제

요구사항

• 오토레이아웃과 스마트에니메이트를 활용한 쉬운 스크롤 프로토타이핑 구현
• 배너가 자동으로 넘어가는 애니메이션 구현
• 버튼을 눌렀을 때 메뉴 색상 변경 구현

실습과정 및 결과

20일차(2024.12.06)

개념 정리

-

과제

요구사항

• 돌아가는 달 애니메이션으로 구현하기
• 로딩바 구현하기
• 깜박이는 커서 구현하기

실습과정 및 결과

21일차(2024.12.09)

과제

요구사항

• 원하는 사이트 클론 디자인 -> 단 오버레이하지 않고 눈으로 보고 그릴 것

실습과정 및 결과

전체 회고

이제 강의가 얼마 남지 않았다. 남은 시간 동안 실무와 프로젝트에 바로 활용할 수 있는 프로토타입과 애니메이션에 대해 공부하면서, 내가 알고 있던 개념들을 하나씩 정리하고 체계를 잡아나가고 있다는 느낌이 든다.

처음엔 막연했던 개념들이 강의를 통해 점차 구체화되고, 실질적인 응용 방법까지 익히게 되면서 확실히 자신감도 붙는 것 같다. 지금 배우고 있는 내용들을 잘 다듬어서, 앞으로 프로젝트에서 더 유연하고 효과적으로 활용할 수 있도록 꾸준히 연습해야겠다는 다짐이 생긴다.

특히, 프로토타입과 애니메이션은 단순히 화면을 구현하는 데 그치지 않고 사용자 경험을 크게 좌우할 수 있는 중요한 요소라는 점에서 흥미롭다. 애니메이션의 타이밍이나 프로토타입의 상호작용이 사용자에게 얼마나 직관적으로 전달되는지 고민하다 보니, 작은 디테일 하나하나가 얼마나 중요한지 새삼 깨닫게 된다. 이 과정을 통해 단순히 학습에 그치지 않고, 나만의 스타일과 아이디어를 녹여낸 작업물을 만들어보는 데도 계속해서 집중하고 싶다.

강의가 끝난 후에도 이곳에서 배운 모든 것을 기반으로 계속 성장할 수 있을 거라는 기대감이 생긴다.

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

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

Week 6

2024.11.27(Wed)

• 플로우차트 설계

  2024.11.29(Fri)

• 와이어프레임 제작

  2024.12.02(Mon)

• Userbility Test 설계

16일차(2024.11.27)

프로젝트 학습 내용

플로우차트

서비스를 사용하기 위해 수행하는 일련의 단계와 결정을 한 눈에 파악할 수 있도록 도와주기 위해 시각적으로 표현한 흐름도

• 개선하고자 하는 앱 화면의 흐름을 염두하여 단계별로 정해진 다이어그램 기호에 맞춰 표현
• 진행순서는 왼쪽에서 오른쪽으로 위에서 아래로 화살표를 이용하여 표현
• 개선전(As-is)과 개선후(To-be) 기호 컬러를 달리 표현하여, 어떤 문제를 어떻게 해결하였는지, 명확하게 비교하여 보여줄 수 있음

플로우차트 표준 기호

플로우차트 제작 순서

1. 상단부에 사용자여정지도에 정리했던 사용자의 행동흐름을 기입하고, 하단부에 플로우를 정리한다.
2. 개선전 앱을 기준으로 As-is 플로우차트를 만들다.
3. As-is 플로우차트를 복사하여 To-be 플로우차트로 수정한다.
4. As-is와 To-be에서 변화된 부분은 다른컬러로 표현하고, 왜 이렇게 개선하였는지 인사이트를 정리한다.

프로젝트 목표 설정

• 두번째 다이이몬드의 시작! 문제해결에 앞서, 무엇을(어떤 문제)를 어떻게 해결할 것인지 목표 설정하기
• 구체적으로 UI의 어떤 기능/ 어떤 사용성을 개선할 것인지 목표를 정한다.
• 구체적일 수록 향후 진행을 매끄럽게 할수 있으므로, 시간을 할애하여 고심하여 정리한다.
• 개선해야하는 UI페이지의 양을 팀원당 10페이지정도 고려하여, 3가지~5가지정도 목표를 설정한다.

각 Task 실습

실습과정 및 결과

회고

와이어프레임 만드는 작업 너무 어렵다! 확실히 프롭테크 앱이다보니 많은 정보를 담고 있어서 로우 피델리티로 화면 구성을 하더라도 화면의 양이 많아 정리를 어떻게 해야할지 망설여졌다. 그래도 나름 정리를 잘한거 같다!

17일차(2024.11.29)

프로젝트 학습 내용

와이어프레임

선(Wire)으로 틀(Frame)을 잡는다는 뜻으로, UI의 콘텐츠, 기능, UI요소, 레이아웃을 대략적으로 요약하여 보여주는 화면설계도

• 와이어프레임을 통해 페이지별 레이아웃과 화면간의 흐름을 파악할 수 있음
• 내용을 표시할 색상, 타이포그라피, 이미지 등의 디자인요소들을 생략하고, 흑백의 윤곽선으로 표현하여 박스나 선을 주로 사용함
• 그 외의 내용은 최대한 추상화

와이어프레임 제작 방법

1. 기존의 앱 화면을 To-be플로우차트 기준으로 캡처하여, 아카이빙 한다. 이때 태스크 수행에 연속성을 부여하고 행동에 제한을 주는 요소들을 최소화한다.
2. 앱화면을 토대로 To-be 로우피델리티 와이어프레임을 제작한다. 이때 사용자가 태스크를 수행하는 각 단계마다 행동 유도성을 고려하여 화면설계 작업을 진행한다. 감이 안잡힌다면 As-is 와이어프레임을 먼저 만들어본다.
3. 로우피델리티 와이어프레임을 토대로, 하이피델리티 와이어프레임을 만들며, 프로토타입을 준비한다.

각 Task 실습

실습과정 및 결과

회고

18일차(2024.12.02)

프로젝트 학습 내용

사용성테스트(Userbility Test)

사용자에게 특정 과업을 수행하도록 과제(Task)를 부여한 뒤,그 일을 진행하는 과정(행동)을 관찰하는 방법

• 서비스 기획 초기의 사용성 테스트를 통해, 유저의 니즈와 사용성을 미리 확인하고 개선할 수 있다.
• 의도한 서비스 시나리오대로 유저가 행동하는지 아닌지 알 수 있음
• 필수적인 컨트롤 요소를 인지/이해/예측/실행 하는지 알 수 있음

사용자관찰조사와 사용성테스트의 차이

• 사용성테스트는 앞서 진행한 사용자관찰조사와 방법이 유사하지만 그 목표가 다르다.
• 사용자관찰조사는 타겟유저의 니즈, 타겟유저의 페인포인트 등에 목표가 맞춰져 있다면, 사용성테스트는 어느정도 제품이 완성되었을때, 사용성 개선을 목표로 진행한다.

각 Task 실습

실습과정 및 결과

회고

스토리보드를 제작하기 전, 다양한 고민이 많았다. 직접 그림을 그릴지, 아니면 다른 팀들처럼 오픈소스를 활용할지 결정하는 데 시간이 걸렸다. 오픈소스를 사용하는 것이 더 간편해 보이긴 했지만, 적합한 소스를 찾는 데 오히려 더 많은 시간이 소요될 것 같았다. 그래서 직접 그림을 그리는 쪽으로 방향을 정했고, 그 역할을 내가 자진해서 맡았다. 비록 높은 퀄리티는 아니더라도, 직접 그리면 원하는 컷을 정확히 만들어낼 수 있고, 소스를 찾는 수고도 덜 수 있을 것이라 생각했다.

주어진 시간은 약 4시간. 그 안에 8컷을 제작해야 했는데, 시간 내에 가능할까 하는 걱정이 앞섰다. 결과적으로 7컷 정도를 완성했는데, 처음 예상했던 것보다 더 빠르게 진행할 수 있었다. 그림을 그릴 때는 원래도 집중력이 높은 편이지만, 스토리를 짜고 각 컷에 맞는 요소를 배치하며 그림을 그려야 한다는 점에서 4시간 내내 거의 그림만 그려야 했어서 신체적으로도 정신적으로도 부담이 있었다. 그러나 팀원의 도움 덕분에 일이 훨씬 수월했다. 한 팀원이 스토리라인과 대략적인 배치를 먼저 구성해준 덕분에, 나는 완전하게 그림 그리는 데만 집중할 수 있었고, 그 과정은 마치 손에 신이 내린 듯 빠르고 자연스럽게 그림을 그려나갔다.

완성 후, 팀원들이 "정말 고생했다"며 칭찬해줘서 감사했고, 다른 팀들 사이에서도 손그림으로 제작한 팀이 우리밖에 없어서인지 감탄을 받았다. 그 순간 뿌듯함이 밀려왔고, 직접 선택한 방식으로 작업을 해낸 것이 큰 보람으로 다가왔다. 이번 경험은 팀워크의 중요성과 더불어, 때로는 더 단순해 보이는 방법이 가장 효과적일 수 있다는 것을 느끼게 해준 소중한 과정이었다. 뭐 물론 나중엔 AI를 써야겠다고 생각했지만 말이다. AI가 더 퀄리티가 높아보였다^^;;

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

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

Week 6

2024.11.27(Wed)

• 프로토타입 -애니메이션 -커브

  2024.11.29(Fri)

• 프로토타입 -스크롤
• (+)중간평가 시험

  2024.12.02(Mon)

• 드롭다운 컴포넌트

16일차(2024.11.27)

개념 정리

프로토타입

애니메이션

: 시각적 효과

커브

: 애니메이션 속도선의 커브

과제

요구사항

• 버튼에 각 애니메이션을 적용하여 프로토타입 구현하기
• 커브를 적용하여 스마트 애니메이션 구현해보기
• 자동으로 움직이는 스플래쉬 화면 구현하기

실습과정 및 결과

회고

프로토타입 작업은 전체적으로 어렵지 않았다. 이전에 프로토타입을 어렴풋이 접해본 경험이 있어, 큰 어려움 없이 수월하게 진행할 수 있었다. 하지만 간혹 예상치 못한 움직임이나 동작이 발생할 때가 있었는데, 왜 그렇게 작동하는지 이해하기 어려운 경우가 있었다. 그럴 때마다 문제를 해결하고 싶은 마음이 간절했지만, 잘 풀리지 않으면 답답함이 밀려오기도 했다.

그럼에도 불구하고, 다른 사람들의 과제를 함께 살펴보는 과정은 매우 흥미로웠다. 특히 그들이 직접 디자인한 스플래시 화면을 구경할 때마다 신선한 아이디어와 창의성이 돋보였다. 다양한 접근 방식과 상상력을 자극하는 스플래시 화면들을 보며 많은 영감을 받을 수 있었다. 이런 경험은 단순히 기술적인 부분을 넘어서, 디자인의 가능성과 창의성에 대해 다시 한번 생각해보는 계기가 되었다.

17일차(2024.11.29)

개념 정리

프로토타입

스크롤

스크롤하고자 하는 프레임, 컨테이너를 화면 사이즈만큼 크기를 정한 후에 해당 속성을 설정한다

과제

요구사항

• 스크롤 화면을 구현해볼 것
• 다양한 프로토타입 애니메이션을 활용하여 실제 앱 화면을 구현해볼것

실습과정 및 결과

앱 화면 프로토타입 실제 구현 화면, 잘 반영했는지는 모르겠다

회고

앱 화면 프로토타입을 만들면서 빠진 부분이 없는지 여러 번 확인했지만, 작업을 진행하다 보니 여전히 누락된 부분이 조금씩 발견됐다. 이 과정을 통해 프로토타입 작업이 생각보다 훨씬 꼼꼼함을 요구한다는 걸 체감했다.

특히, 프로토타입을 제대로 만들려면 화면 구성이나 리스트 같은 기본 정리가 확실히 되어 있어야 한다는 것도 깨달았다. 화면 간의 흐름이 매끄럽게 이어지려면 각 요소의 위치나 기능에 대해 미리 세세하게 고민해야 했다.

또, 프로토타입이 단순히 화면을 연결하는 데 그치지 않고, 실제로 사용자 입장에서 경험을 미리 검증해볼 수 있는 중요한 도구라는 걸 다시금 느꼈다. 화면 전환이 예상대로 작동하지 않거나 인터랙션이 어색할 때, 사용자 입장에서 뭐가 불편한지 다시 돌아보는 계기가 되었다.

이번 작업을 통해 디테일에 더 신경 써야겠다는 생각이 들었고, 다음엔 누락이나 오류를 줄이기 위해 체크리스트 같은 걸 만들어서 더 체계적으로 진행해봐야겠다. 그렇게 하면 프로토타입의 완성도를 좀 더 높일 수 있을 것 같다.

18일차(2024.12.02)

개념 정리

드롭다운 컴포넌트

드롭다운 컴포넌트를 프로토타입으로 만들어봄으로써 프로토타입을 좀 더 심화적으로 공부한다.

과제

요구사항

• 베리어블 모드를 활용하여 드롭다운 컴포넌트를 만들고 프로토타입 구현까지 진행

실습과정 및 결과

회고

베리어블 모드를 활용해 드롭다운 컴포넌트를 세팅하는 과정이 생각보다 만만치 않았다. 특히 컴포넌트 간 연결이 헷갈려서, 어떤 경로로 연결하고 액션을 어떤 순서로 설정해야 할지 혼란스러웠다. 작업을 하다 보면 매번 어디서 실수했는지 확인하고 다시 고쳐야 하는 경우가 많았다.

하지만 이 과정을 통해 베리어블 모드를 잘 활용하면 프로토타입을 훨씬 더 다채롭게 구현할 수 있겠다는 생각이 들었다. 단순히 화면 전환을 넘어서, 사용자와의 인터랙션을 더 세밀하게 조정할 수 있는 강력한 도구인 듯 하다.

앞으로 베리어블 모드를 더 자주 연습하면서 기능을 완전히 익히고, 프로토타입의 완성도를 한 단계 끌어올려봐야겠다. 특히 이번 경험을 바탕으로 컴포넌트 연결 구조를 더 체계적으로 정리하는 방법을 고민해봐야겠다.

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

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

Week 5

2024.11.20(Wed)

• AsIs & ToBe
• Project Goal 설정

  2024.11.22(Fri)

• 팀별 중간평가 발표

  2024.11.25(Mon)

• 스토리보드 제작

13일차(2024.11.20)

프로젝트 학습 내용

문제 정의하기

• 더블 다이아몬드 프로세스 중 첫번째 다이아몬드의 마무리 단계
• 확장했던 문제들을 마지막으로 정리하는 단계
• 현재의 상태(문제)를 As-is로 정리하고, 향후 개선되어야 하는 방향을 To-be로 정리한다.

As-Is & To-Be

• As Is : 현재상태 및 문제정의
• To Be : 문제의 향후 개선 방향

프로젝트 목표 설정

• 두번째 다이이몬드의 시작! 문제해결에 앞서, 무엇을(어떤 문제)를 어떻게 해결할 것인지 목표 설정하기
• 구체적으로 UI의 어떤 기능/ 어떤 사용성을 개선할 것인지 목표를 정한다.
• 구체적일 수록 향후 진행을 매끄럽게 할수 있으므로, 시간을 할애하여 고심하여 정리한다.
• 개선해야하는 UI페이지의 양을 팀원당 10페이지정도 고려하여, 3가지~5가지정도 목표를 설정한다.

각 Task 실습

실습과정 및 결과

회고

이날은 As-Is와 To-Be 장표에 더해 발표 자료까지 준비하면서 체력적으로나 정신적으로 기진맥진한 상태였다. 하루 종일 데이터를 정리하고 시각화하며 어떻게 하면 명확하게 내용을 전달할 수 있을지 고민했다. 생각보다 손이 많이 가는 작업이었고, 팀원들과의 조율도 만만치 않았다.

다행히 청년사관학교 1주년 기념으로 닭강정 간식을 받아먹고 잠시 쉬는 시간을 가질 수 있었다. 최근에 간식을 너무 많이 받아먹어서 어쩌면 우리는 사육당하는게 아닌가 싶은 순간이 있지만 상관없다. 맛있는거 주는 사람 다 착한 사람이다.

이번 장표 작업을 하면서 발표 자료 구성의 중요성을 다시 한번 깨달았다. 단순히 데이터를 나열하는 것만으로는 부족하고, 이를 보는 사람의 관점에서 직관적이고 이해하기 쉽게 만드는 것이 핵심이다. 그걸 어떻게 잘 보여줄지를 정말 많이 고민하면서 레이아웃을 작업했고, 팀원들과 함께 레이아웃을 토대로 빠르게 우리가 이때까지 정리한 데이터를 채워나갈 수 있었다.

한편, 발표 자료를 만들면서 시각 자료의 통일성에도 신경을 많이 썼다. 폰트 크기와 색상, 그래프 디자인 등을 일정하게 유지하려고 노력했는데, 이렇게 세부적인 디테일까지 신경 쓰는 과정에서 시간이 예상보다 많이 소요됐다. 하지만 조금씩 완성되어가는 결과물을 보고 나니, 이 노력이 헛되지 않았다는 생각을 했다! 발표장표 만드는건 참 어려운 일인거 같다!!

14일차(2024.11.22)

중간평가

--

각 Task 실습

실습과정 및 결과

회고

역대급으로 힘든 하루였다. 발표 장표의 분량이 예상보다 많았고, 정리되지 않은 데이터들도 있어 이를 어떻게 구성하고 내용을 배치할지 고민하는 데 시간이 꽤 걸렸다. 평소에는 큰 어려움 없이 따라가던 수업에서도 난관이 있었다. 베리어블 기능은 사용해본 적이 있지만, 충분히 다뤄본 경험이 부족해서 적용 과정에서 난항을 겪었다. 익숙해지면 나아질 수 있겠지만, 그날은 혼란스러운 마음을 가라앉히기가 쉽지 않았다. 그 와중에 팀원이 피그마에서 커서를 움직이며 장난을 쳤다. 평소 같았으면 웃고 넘어갔을 일이었지만, 여러 상황이 겹쳐 정신이 더 흐트러졌다. 아마 오전 시간대여서 배가 고파서 그랬을 수도 있을 거 같다

그러나 점심을 먹고 다시 작업을 이어갔고, 결과적으로 발표 장표를 완성할 수 있었다. 발표 자료를 정리하며 "완성도 높은 결과물을 만들고 싶다" 는 욕심이 생겨서인지, 팀원들이 발표 준비를 위해 자리를 비운 동안에도 혼자 남아 자료를 다듬었다.

발표를 맡은 데레사 언니는 내용을 깔끔하게 정리하고 발표도 안정적으로 마무리했다. 팀원들은 그녀가 조금 긴장했던 것 같다고 말했지만, 내가 보기엔 유연하게 잘 진행했다. 급하게 준비했던 탓에 일부 데이터가 부족하거나 빠진 디자인이 눈에 띄었지만, 최종적으로는 모두가 만족할 수 있는 수준의 자료를 완성했다고 생각한다.

발표가 끝난 후, 문득 작업 중에 내가 팀원들에게 너무 엄격하게 굴었나 싶어 미안한 마음이 들었다. 그런데도 팀원들이 “덕분에 발표 자료의 완성도가 높아졌다” 며 고생했다는 말을 해줘 정말 감사하고 고마웠다. 데레사 언니가 발표를 잘 마무리한 모습을 보니, 우리 팀의 노력과 협력이 결실을 맺었다는 생각이 들어 뿌듯했다. 물론 아직 중간 발표라 가야할 길이 멀긴 하지만 이번 경험을 통해 팀워크와 배려가 얼마나 중요한지 다시금 깨달았다. 모두가 최선을 다한 덕분에 나름대로 좋은 결과를 얻었다는 점에서 정말 값진 하루였다.

15일차(2024.11.25)

프로젝트 학습 내용

스토리보드(유저 시나리오)

• 유저시나리오를 시각적으로 표현한 것
• 프로젝트의 목표로 설정한 사용성들이 개선되었을 때 사용자의 행동, 서비스의 반응 등을 순차적으로 보여줌
• 해당 시나리오(스토리보드)를 기준으로 플로우차트 제작과 이후 UT(사용성테스트 시 참가자의 이해를 돕기위해 사용될 예정이다.
• 글로만 정리되어도 OK!!!

질문!

Q. as-is 또한 시나리오로 같이 보여줘야하는거 아닌가요? A. as-is는 유저 저니 맵을 통해 충분히 어떤 점을 불편해하고 있는지 보여줬습니다. 우리가 생각한 문제와 그 문제를 해결한 부분에서 실제로 사용성들이 개선되었을 때 사용자의 행동, 서비스의 반응 등을 예상하여 순차적으로 보여줌으로써 이런 식으로 개선이 될거라는걸 보여주는거죠!

Q. 스토리보드를 UT시 먼저 보여주고 사용성테스트를 진행한다고 했는데 그럼 저희가 그 스토리보드대로 사용자의 행동을 유도하는건 아닐까요? A. 혹시나 사용자들이 시나리오를 보고 따라가려는 경향성을 보일 순 있겠지만 그럼에도 불구하고 사용자들이 시나리오대로 따라가지 못한다면 기능 개선 부분에 문제가 있는거에요. 최대한 사용자들이 그 시나리오를 따라갈 수 있게 하는 것이 팀의 UX 개선 목표입니다.

Q. 퍼소나가 2개 이상이면 시나리오도 2개 이상이 나와야하는건가요? A. 보통은 그게 맞지만 필수적인건 아니에요!스토리보드의 주제는 어떤 기능이 개선되었다를 포괄적으로만 알 수 있으면 되는거거든요. 두개 이상이라면 하나로 포괄적으로 진행해도 되고, 퍼소나가 너무 명확하게 구분되어 있다고 하면 2개를 해서 좀 더 각 퍼소나를 가진 사용자가 어떤 기능이 개선되어 있는지를 알 수 있게 구분하는 것도 좋겠네요!

각 Task 실습

실습과정 및 결과

회고

스토리보드를 제작하기 전, 다양한 고민이 많았다. 직접 그림을 그릴지, 아니면 다른 팀들처럼 오픈소스를 활용할지 결정하는 데 시간이 걸렸다. 오픈소스를 사용하는 것이 더 간편해 보이긴 했지만, 적합한 소스를 찾는 데 오히려 더 많은 시간이 소요될 것 같았다. 그래서 직접 그림을 그리는 쪽으로 방향을 정했고, 그 역할을 내가 자진해서 맡았다. 비록 높은 퀄리티는 아니더라도, 직접 그리면 원하는 컷을 정확히 만들어낼 수 있고, 소스를 찾는 수고도 덜 수 있을 것이라 생각했다.

주어진 시간은 약 4시간. 그 안에 8컷을 제작해야 했는데, 시간 내에 가능할까 하는 걱정이 앞섰다. 결과적으로 7컷 정도를 완성했는데, 처음 예상했던 것보다 더 빠르게 진행할 수 있었다. 그림을 그릴 때는 원래도 집중력이 높은 편이지만, 스토리를 짜고 각 컷에 맞는 요소를 배치하며 그림을 그려야 한다는 점에서 4시간 내내 거의 그림만 그려야 했어서 신체적으로도 정신적으로도 부담이 있었다. 그러나 팀원의 도움 덕분에 일이 훨씬 수월했다. 한 팀원이 스토리라인과 대략적인 배치를 먼저 구성해준 덕분에, 나는 완전하게 그림 그리는 데만 집중할 수 있었고, 그 과정은 마치 손에 신이 내린 듯 빠르고 자연스럽게 그림을 그려나갔다.

완성 후, 팀원들이 "정말 고생했다"며 칭찬해줘서 감사했고, 다른 팀들 사이에서도 손그림으로 제작한 팀이 우리밖에 없어서인지 감탄을 받았다. 그 순간 뿌듯함이 밀려왔고, 직접 선택한 방식으로 작업을 해낸 것이 큰 보람으로 다가왔다. 이번 경험은 팀워크의 중요성과 더불어, 때로는 더 단순해 보이는 방법이 가장 효과적일 수 있다는 것을 느끼게 해준 소중한 과정이었다. 뭐 물론 나중엔 AI를 써야겠다고 생각했지만 말이다. AI가 더 퀄리티가 높아보였다^^;;

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

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

Week 5

2024.11.20(Wed)

• 베리어블 -컬러 -스트링

  2024.11.22(Fri)

• 베리어블 -넘버 -불린

  2024.11.25(Mon)

• 프로토타입 -트리거 -액션

13일차(2024.11.20)

개념 정리(13&14일차)

베리어블(variable)

색상, 폰트, 모드변환 등 스타일과 같이 속성들을 등록해서 재사용할 수 있게 만드는 것 스타일과 베리어블은 어떤 목적으로 사용하느냐에 따라 선택한다.

1. 컬러(color)

• 색상값 저장

  2. 스트링(string)

• 텍스트값 저장
• 언어 전환

  3. 넘버(number)

• 텍스트 저장
• 텍스트크기, 코너크기, 그리드, 투명도, 이펙트

  4. 불린(boolean)

• 객체 노출/비노출

스타일과 베리어블의 차이

베리어블 구조

컬렉션-모드-그룹-변수 모드를 전환하며 사용할 수 있다 여러가지 경우의 수를 등록해서, 전환해가며 사용 ex) A스타일 or B스타일 / 다크모드 ot 라이트모드

베리어블 등록 순서

1. 베리어블에 변수등록

2. 레이어에 반영 및 적용

3. 프레임/섹션에 각각 모드 설정

과제

요구사항

• 베리어블을 사용하여 모드 전환을 구현해볼 것

실습과정 및 결과

회고

이때까지 배웠던 것 중에 가장 어려웠던 거 같다. 아무래도 무료 플랜을 쓰고 있다보니 유료 플랜을 써야 쓸 수 있는 베리어블을 쓸 일이 거의 없었기도 하고 외주 작업을 할 때도 베리어블을 쓸만큼 정교하게 작업할 일이 많이 없었다보니 더 그랬던 것 같기도 하다. 섹션은 그저 화면 프레임의 그룹으로 구분하고 하나의 flow를 구분짓기 위해 하는 줄 알았는데 이런 식으로 모드 전환을 할 수 있다는 건 처음 알아서 굉장히 신기했다. 사실 앞부분은 내가 이걸 들으면서 내가 지금 이걸 듣는게 맞는건가 고민을 많이 했었는데 내가 모르는 부분이 나오니 당황스럽지만서도 어떻게 해야할지를 차근차근 공부해보는 맛이 너무 재미있다. 역시 많이 안다고 생각해도 모르는건 존재하고, 그만큼 겸손해야 하는 것 같다.

이번 수업은 지금까지 배운 것 중 가장 어려웠다. 아무래도 무료 플랜을 주로 사용해왔고, 유료 플랜에서만 사용할 수 있는 베리어블을 다뤄본 적이 거의 없다 보니 더욱 낯설게 느껴졌다. 외주 작업에서도 베리어블을 쓸 만큼 정교하게 작업할 일이 많지 않았던 점도 영향을 끼친 것 같다.

그동안 섹션은 화면 프레임의 그룹으로만 인식했고, 단순히 하나의 플로우를 구분하기 위해 사용하는 줄 알았다. 그런데 모드 전환이라는 새로운 활용 방식을 알게 되니 굉장히 신선하게 느껴졌다. 사실 수업 초반에는 "내가 이걸 제대로 이해하고 있는 게 맞나?"라는 생각이 들 정도로 막막했다. 하지만 시간이 지나며 모르는 부분이 하나둘 나오기 시작하면서, 이를 하나씩 공부해가는 과정에서 묘한 재미를 느꼈다. 이런 게 공부의 재미인 것 같기도 하다. 모르는 것을 알아가는 재미!

"내가 어느 정도 알고 있다"는 자신감이 실제로는 부족한 인식에서 비롯된 착각일 수도 있다는 점을 일깨워줬다. 여전히 배워야 할 부분이 많고, 이런 겸손한 자세로 꾸준히 학습하고자 하는 의지를 불태워야겠다고 다시금 마음가짐을 다잡았다.

14일차(2024.11.22)

개념 정리

variable 등록 및 적용 방법(좀 더 상세하게)(ex.boolean)

1. 베리어블 변수 등록

2. 레이어 HIDE에 적용

3. 프레임별 AUTO모드설정

4. 섹션별 모드설정

과제

요구사항

• 모드 전환을 통해 사진을 변경해볼 것

실습과정 및 결과

회고

이번 시간에는 처음으로 과제를 내지 말까하고 망설였던 시간이었다. 수업 집중도가 높아야 했는데, 자리 배치 문제로 강사님과 모니터가 너무 멀어 내용을 놓치는 일이 잦았다. 정말 높은 집중력을 요구하는 자리인지라 조금만 놓치면 어디를 하고 있는지 파악하기가 힘들다. 게다가 중간과제 발표 자료도 준비해야 했기 때문에 정신없이 분주했다.특히, 베리어블의 모드 변경 부분에서 이해도가 부족했던 탓에 강사님의 설명을 놓쳐 더 막막했다.

베리어블의 모드 변경을 잘 이해하지 못하는 과정에서 강사님 수업까지 놓치니 어떻게 해야할지 살짝 막막했다. boolean 설정에서는 보여지는 요소와 숨겨지는 요소를 구분하는 작업이 특히 어려웠다. 단일 조건일 때는 비교적 단순하게 해결할 수 있었지만, 조건이 두 개 이상으로 늘어나니 헷갈리기 시작했다. 나는 나름대로 잘 설정했다고 생각했지만, 베리어블이 제대로 적용되지 않아 피그마 기능을 내가 모르는 부분이 있는 건가 싶어 당황했다.

결국 문제가 된 이유는 간단했다. 섹션 내부에서 베리어블을 등록하고 설정해야 하는데, 이 최종 단계를 빼먹은 것이다. 단순한 실수로 인해 한참 동안 기능이 작동하지 않는 이유를 찾지 못하고 헤매고 있었다. 그런 상태에서도 팀원들과 옆 팀의 도움을 받으며 원인을 찾아냈고, 문제를 해결할 수 있었다. 가르쳐주는 것도 중요하지만 내가 도움받고자 할 때는 도움을 요청하는 용기도 필요함을 절실하게 느꼈다.

또한 베리어블을 다루면서 파일 정리에 대한 고민이 더더욱 깊어졌다. 스타일보다 훨씬 세분화되고 정교한 속성을 관리해야 했기 때문에, 이를 효율적으로 정리하는 방법이 필요해보였다. 특히 대규모 프로젝트에서 이런 복잡한 작업을 어떻게 관리하는지 궁금해졌다. 실제 기업에서는 어떤 체계로 이런 파일들을 정리하고 있는지 조사가 필요할 것 같다. 이 부분은 앞으로 스스로 더 공부하고 알아봐야 할 숙제라고 느꼈다.

15일차(2024.11.25)

개념 정리

프로토타입(prototype)

피그마에서 디자인을 인터랙티브하게 만들고, 실제 사용 흐름을 시뮬레이션하는 기능 화면 전환, 사용자 동작에 따른 반응 등을 설정해 디자이너와 이해관계자가 실제 사용자 경험을 직관적으로 확인할 수 있도록 도움 개발 전 디자인 검증 단계에서 중요한 역할

*노드(Node) : 연결된 선

프로토타입 유의사항

• 도형에는 프로토타입이 되지 않으며 프레임으로 만들어져있어야 한다
• 팝업을 만들때도 프레임으로 만들어져 있어야 프레임적용이 가능하다

프로토타입 종류

트리거(trigger) : 계기 - 사용자의 명령/입력

액션(action) : 사용자명령/입력에 대한 결과

과제

요구사항

• 트리거와 액션을 활용하여 프로토타입 구현해보기

실습과정 및 결과

회고

프로토타입 부분은 이전에 다뤘던 내용이라 이번에는 따라가는 데 어려움이 없었다. 하지만 피그마의 프로토타입 시스템에는 아쉬움이 있었다. 출발이 컴포넌트라면 끝도 컴포넌트로 이어질 수 있을 것 같은데, 왜 반드시 페이지로 끝나야 하는지 이해가 가지 않았다.

이번 수업은 비교적 간단한 프로토타입을 다뤘기에 노드가 많지 않았지만, 만약 매우 세부적인 프로토타입을 구현해야 한다면 노드 정리 방식이 중요할 것 같았다. 프로토타입 툴인 프로토파이와 같은 더 전문적인 툴을 사용하는 경우에도 비슷한 고민이 있을 것 같다. 그 안에서도 복잡한 노드들이 생길 텐데, 이를 효율적으로 정리하는 방법이 궁금했다.

개발 환경에서는 이런 문제를 코드로 해결할 수 있지만, 디자이너 입장에서는 툴 내에서 노드를 정리하고 관리하는 일이 생각보다 큰 과제가 될 수 있음을 느꼈다. 앞으로 이런 문제를 해결할 수 있는 더 나은 방식을 고민하고 배워야겠다는 동기를 얻었다.

여담이지만 강사님 개념 오타 좀 안내주셨으면 좋겠다. 피그마 강의안에는 노드가 노브라고 되어 있던데 처음 배우는 사람은 저게 정말 저 단어인 줄 알 거 같다

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

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

열심히 취업 준비를 하며 간간히 외주 작업을 진행하고 있던 어느 날, 대학교 디자인/마케팅 동아리 부장 후배에게 갑작스러운 연락이 왔다.

"선배님! 멘토리얼 세미나 해주실 수 있어요?" "? 엄...그래! 상관은 없는데 언제?" "다음주 목요일이요!" "???????"

알고보니 동아리 홍보를 겸해 멘토리얼 세미나를 열려 했다고 한다. 세미나 연사를 고민하던 중, 동아리 담당 교수님이 나를 추천해주셨다고 했다. 교수님은 내가 사업자로 외주 작업을 하며 디자인 일을 하고 있다는 걸 알고 계셔서, 디자인에 관심 있는 후배들에게 도움이 될 것 같아 추천하신 것 같다. 내가 뭐라고 이렇게 찾아주시니 감사할 따름이다. 그런데 세미나가 바로 다음 주라니(전화받았을 때가 그전주 금요일이었다), 약간은 당황스러웠다. 게다가 동아리 내부 세미나가 아니라 전교생을 대상으로 한다니 긴장도 됐다. 다행히 온라인으로 진행하자고 해서 서울로 내려갈 일은 없었지만, 내 본고장이 구미라 대구가 가까워서 오프라인 세미나로 진행할 수 있었다면 교수님도 뵙고, 친구들도 만나고, 본가에도 갈 수 있었을 거 같아 내심 아쉬움도 있었다. 그 이전에 목요일 저녁에 다른 프로젝트 미팅이 있어 오프라인 일정은 조금 어려운 상황이긴 했다. 갑작스러운 제안에 당황스럽기도 했지만, 후배들에게 어떤 이야기를 해줄 수 있을까 고민하며 발표 자료를 준비했다.

이미 한번 해봤지만...많이 들으러올까?

사실 작년에 동아리 내부에서 한 번 강연을 진행한 적이 있었다. 그때는 사업자가 아니었지만, 어느 정도 프리랜서로서 디자인 작업을 해오던 시점이었고, 학생들에게 디자인 툴을 알려줬던 적이 있었다. 작년 세미나 당시 참여한 학생은 대략 6명 정도였다. 사실 나의 모교인 DGIST는 디자인학부가 있는 학교는 아니고, 졸업 후 대부분 연구나 대학원, 전공 관련 직업으로 진로를 정하는 학생들이 많다 보니, 얼마나 많은 학생들이 세미나에 올까 싶었다. 디자인 관련 과목은 몇 개 있긴 했지만, 본격적으로 디자인 진로를 선택한 학생은 거의 없다. 어쩌면 나는 특이한 케이스인 것 같긴 하다.

작년에 강연했던 내용은 내가 어떤 기준으로 커리어 진로를 잡고자 했고, 어떤 계기로 디자이너 진로를 선택하게 됐는지, 그리고 그걸 위해 어떤 관련 활동을 했는지, 비전공자가 디자이너가 되기 위해서는 뭘 해야하고 어떤 마음가짐을 가져야 하는지를 설명했다. 그리고 마지막으로 내가 정말 극초반에 했던 디자인과 최근에 했던 디자인의 비교샷을 보여주며 처음과 비교했을 때 처음이 볼품없어 보이고 초라해보인다면 그건 그만큼 당신이 성장했기 때문이라 말하며 나도 이렇게 성장했으니 후배들도 할 수 있다고 강조하며 발표를 끝마쳤다.

비록 그때 당시에 세미나에 참여했던 학생들이 많이 없었지만 그래도 디자인 진로에 적극적으로 관심을 가지고 있는 학생들이 몇몇 있었고 그 친구들에게 도움이 될만한 정보는 최대한 말해주고자 노력했다. 그 친구들이 눈을 반짝이며 들어줘서 세미나를 잘 진행할 수 있었다.

이미 비슷한 경험이 있어 덜 떨리긴 했지만, 그만큼 기대감보다는 부담감이 더 크게 느껴졌다. 디자인 진로에 관심을 가진 친구들이 많지 않았던 예전 기억이 나서, 이번에도 비슷할 거란 생각이 들었다. 무엇보다 현재 내가 많이 위축된 상태라, 이런 소소한 경험을 가진 내가 강연을 해도 괜찮은 사람일까 하는 걱정이 가장 컸다. 그럼에도 불구하고 발표는 자신감이 중요하다고 생각했다. 그리고 소소하더라도 뭘 많이 하기도 했고! 그래서 디자이너 진로를 떠나, 전공과 다른 진로를 고민하는 후배들에게 내 경험이 조금이라도 도움이 될 수 있다면 좋겠다는 마음으로 발표 자료를 준비하기 시작했다.

그와중에 교수님이 세미나에 대한 홍보글을 올려주셨는데 순간 좀 뭔가 머쓱하기도 하고 이게 맞나 싶었다. 하핫^^;;

뭘 얘기해야할까?

막상 모든 학생들이 포괄적으로 들을 수 있게 만들자고 다짐하긴 했지만 막상 어떻게 시작해야할지 고민이 많이 됐다. 처음에는 아예 디자이너라는 말을 빼버리고 커리어패스를 명확히 잡지 못한 친구들을 위해 다양한 진로에 대해 설명을 해줄까 하는 생각도 있었다. 나는 현재 디자인 쪽 직무에 있기도 하지만 마케팅, 영업, 창업 되게 다양한 진로를 경험해봤으니 말이다. 하지만 세미나 발표를 교수님도 들으신다고 하시길래 디자인 쪽으로 더 집중해서 발표를 해야하는건지에 대한 의문이 들기 시작하니 발표의 방향성이 잡히지 않아 애를 많이 먹었다. 교수님께서 내 작업물도 내심 궁금해하시는 거 같아서 최대한 보여줄거 보여주고, 가릴거 가려서 정리했다. 발표 내용을 디자이너 커리어와 관련된 부분에 중점을 두되, 커리어패스에 대한 조언은 특정 진로가 아니더라도 모든 학생들에게 해당하도록 했다.

한번 해봤다고 해서 이미 썼던 내용을 가져오거나 대충 만들고 싶지 않았다. 어떻게 만들어야할지 고민하다가 최대한 깔끔하게 설명할 내용만 중점적으로 넣었다. 작년에 했던 강연과 비교하면, 이번 발표 자료는 훨씬 깔끔하고 보기 좋게 준비된 것 같았다. 세미나 준비를 하며 내가 조금 더 성장했다는 느낌이 들었다.

두 번째 강연

발표 당일, 약 10명 정도가 참석했었다. 생각보다 디자인에 관심을 가지고 커리어 쪽도 고려하고 있는 학생들도 조금 있었고 무엇보다 나는 그저 내 이야기를 들으러와준 학생들이 있다는 것만 해도 정말 고마웠다. 오프라인 강의였으면 있는 돈 없는 돈 털어서라도 간식이라도 사주고 싶을 심정이었다. 게다가 교수님께서 나를 소개하실 때 수업 때도 디자인도 훌륭했고, 발표에도 자신감이 넘쳐서 정말 인상이 깊은 학생이었다고 칭찬에 칭찬을 거듭해주시는데 어떻게 감사인사를 드려야할지 모를 정도로 너무 감사했다. 날 이렇게 좋게 생각하실줄 몰랐다.

발표 당일이 목요일 점심시간에 진행하는거라 나에게 주어진 시간이 엄청 많진 않았다. 40분 정도였다. 나는 내가 현재 어떤 일을 하고 있는지, 그리고 내가 디자이너로 성장하기까지의 과정과 그안에서 내가 경험한 것들, 가치관의 변화를 설명하며 무엇을 위해 디자이너가 되고자 했는지를 얘기했다(이 내용은 나중에 다른 포스트에서 풀도록 하겠다). 그다음 정말로 디자이너가 되려면 무엇을 해야 하는지, 그리고 내가 실제로 어떤 일을 했는지를 얘기했고, 마지막으로 커리어패스가 명확하지 않은 후배들을 위해 해줄 조언으로 뭐든지 경험해보고, 그 과정을 기록하고 회고하는 습관을 들이자는 말을 끝으로 발표를 마쳤다. 그 이후에 바로 우리 학교 디자인/마케팅 동아리 도미노 부장 친구의 동아리 홍보를 10분 정도 진행하고 간단하게 세미나 내용과 나에 대한 질문을 받았다.

불확실성에 대한 질문

가장 기억에 남는 질문이 있었다면 "프리랜서를 하다보면 일이 있을 때도 있고 없을 때도 있잖아요. 사업을 하면 그런 불확실성에 망설여질 때가 많은데 그럴 때는 어떻게 견디시나요?" 라는 질문이었다. 사실 나조차도 이 문제에 대해 항상 생각하고 있는 문제이긴 하다. 외주 사업을 하고 있다보면 그런 의문은 들 수밖에 없다. 나중에 알았는데 그 친구도 사업을 하고 있다고 한다.

하지만 나는 이렇게 생각한다. 사업은 그런 불확실성을 가지고 갈 수밖에 없다고 말이다. 그래서 나는 내가 무너지지 않기 위한 최소한의 안전망은 챙기고자 노력한다. 예를 들면 알바를 통해 입에 풀칠 정도는 할 수 있게 말이다. 모든 불확실한 일에는 불안감이 따라올 수밖에 없지만 그걸 견딘다면 우리에게 오는 성과는 그 무엇보다도 값지고 뿌듯함을 안다. 그래서 그저 현재에 집중하고 곧 다가올 멋있는 미래를 생각하며 버티는 것이다. 나도 내 불투명한 취준 생활을 외주 프로젝트로 버티고 있듯이 말이다. 그리고 이따금씩 다가오는 변화에 대응하며 유연하게 대처하고, 이 불확실성을 하나의 성장이자 경험이라 생각하며 긍정적으로 받아들이는 것이 불확실성을 대처하는 가장 좋은 방법이 아닐까 생각한다.

학생이 얘기를 듣더니 고개를 끄덕끄덕하며 목례를 했다. 사실 그런 말들은 누구나 해줄 수 있는 말일 수도 있지만, 내심 조금 미안했다. 구체적인 상황을 알았다면 더 많은 조언을 해줬을 텐데, 아쉬운 마음이 들었다. 그래도 내가 전한 이야기가 도움이 되었기를 바란다. 강의 끝에 모든 친구들에게 연락처를 공유했으니 나중에라도 그 학생이 연락을 해주면 좋겠다. 물론 아무도 연락 안 오겠지만! 연락하라고 해도 잘 안 하는 학생들이 많다...

세미나 회고

준비하는 시간이 빠듯하긴 했지만 그래도 그런거 치고 발표자료도 작년 발표와 비교하면 깔끔하게 잘 만든 거 같고 발표 흐름도 많이 자연스러워졌다. 물론 아직 가야할 길이 멀지만 잠시라도 내가 성장했음에 뿌듯함을 느끼고 싶다ㅎㅎ 무엇보다 끝까지 재미있게 들어준 후배님들에게 너무 고마웠다. 교수님도 굉장히 잘 들었고, 본인도 배울 점이 많은 발표였다며 엄청나게 칭찬해주셔서 정말 감사했다. 학생들에게 내 경험을 공유할 수 있어서, 그리고 내 경험이 도움이 된다고 생각하니 뿌듯함과 보람을 느꼈다.

다만 아쉬웠던 점이 있다면 너무 디자이너 쪽에 초점을 맞춰서 얘기를 했나 싶었던 것이었다. 그냥 동아리 홍보에 상관없이 멘토리얼 세미나에 초점을 맞춰서 전공과 상관없는 진로를 가는 데 고민하고 있다면 어떻게 해야할지에 대한 주제로 얘기했다면 더 많은 학생들이 들으러올 수 있었을까 싶기도 하다. 하지만 그래도 그저 내 발표를 끝까지 재미있게 들어준 학생들이, 그리고 아직 아무것도 없는 나를 불러준 교수님이 그저 감사하다. 진로 고민을 하는 모든 학생들에게 도움이 되지는 않았겠지만, 그래도 나의 이야기가 한 명이라도 도움이 됐다면 그것만으로도 충분히 만족스러웠다.

정말 만약에 또 다음 기회가 있다면 그때는 지금보다 훨씬 더 성장한 상태로 더 많은 학생들과 소통하며 내 이야기를, 그리고 다양한 인사이트를 공유하고 싶다.

Week 4

2024.10.13(Wed)

• 정량조사 데이터 정리
• 카드 소팅

  2024.11.15(Fri)

• 사용자 행동 분석

  2024.11.18(Mon)

• 퍼소나 제작(페르소나)

10일차(2024.11.13)

프로젝트 학습 내용

정량조사 데이터 정리

• 온라인 설문조사 데이터를 질문별로 정리하여 그 안에서 각 인사이트를 확보하고 정리한다.

카드 소팅(Card Sorting)

사용자 중심 디자인의 핵심 기술 중 하나로, 카드를 활용해 정보를 분류하고 조직함으로써 효율적인 사용자 경험을 설계하는 방법

• 카드 소팅의 장점:

  • 사용자 중심 설계: 카드 소팅은 사용자의 관점에서 정보 구조를 이해하고 개선하는 데 도움을 줍니다. 사용자가 어떻게 정보를 조직하고 탐색하는지를 직접 관찰할 수 있으므로 사용자 중심 설계에 기여합니다.
  • 데이터 기반 결정: 수집된 데이터는 디자인 결정을 지원하는 데 사용됩니다. 공통 패턴과 사용자의 우선순위를 확인하므로 디자이너와 개발자가 정보 구조를 더 효과적으로 최적화할 수 있습니다.
  • 빠른 이해: 카드 소팅은 상대적으로 빠르고 비교적 간단한 방법입니다. 결과를 빠르게 분석하고 개선사항을 도출할 수 있습니다.

• 카드 소팅의 단점:

  • 제한된 표본 크기: 카드 소팅 결과는 참가자 그룹에 따라 다를 수 있으며, 작은 표본 크기로 인한 편향이 발생할 수 있습니다. 대표성 있는 테스트 그룹을 구성하는 것이 중요합니다.
  • 간접적인 데이터: 카드 소팅은 사용자가 카드를 이용한 가상의 작업을 수행하도록 요구하므로 실제 사용 환경에서의 동작과 완벽하게 일치하지는 않을 수 있습니다.
  • 종속성: 사용자가 주어진 카드와 라벨을 기반으로 소팅을 수행하므로, 결과는 주어진 컨텍스트와 디자인에 의존적입니다.

각 Task 실습

실습과정 및 결과

회고

설문조사 모수가 많이 모여서 다행이었지만, 이를 정리하려니 사실 조금 막막했다. 데이터가 많아지면서 나조차도 어떻게 정리해야 할지 헷갈리기 시작했다. 처음엔 이 방대한 데이터를 어떻게 요약할지 걱정됐지만, 빠르게 설문조사 결과를 정리하고 카드 포맷을 어느 정도 잡은 후, 팀원들과 역할을 분담해 진행하니 조금씩 정리의 윤곽이 잡히기 시작했다. 데이터를 나누어 분석하면서, 길고 복잡하게 흩어져 있던 정보들이 체계적으로 모아지며 서서히 의미 있는 형태를 갖춰졌다.

우리는 1차 분류 기준으로 사용자 경험(UX)의 주요 요소를 설정했다. 다방에서 방을 구할 때 사용자가 가장 중요하게 여기는 신뢰성, 정보나 기능이 잘 보이는지에 대한 가시성, 그리고 이를 효과적으로 활용할 수 있는 기능성이라는 세 가지 큰 축으로 데이터를 분류했다. 이외에 애매하거나 범주에 속하지 않는 데이터는 임시로 '기타'로 분류해 나중에 추가 분석하기로 했다.

생각보다 시간이 많지 않아 1차 분류까지만 완료했지만, 이 과정이 중요하다고 느꼈다. 이를 통해 사용자가 가장 문제라고 느끼는 부분을 파악할 수 있고, 나아가 기능 추가 및 개선의 우선순위를 명확히 선정할 수 있기 때문이다. 이런 체계적인 분석은 결국 우리 프로젝트의 방향성을 잡는 중요한 밑거름이 된다.

이번 과정에서 느낀 점은, 데이터를 정리하고 분석하는 작업이 단순히 수치를 나열하는 것이 아니라 사용자의 목소리를 듣고 그 속에서 인사이트를 도출하는 매우 중요한 단계라는 것이다. 데이터를 처음 마주했을 때 막막했지만, 팀원들과 협업을 통해 조금씩 해결해 나가면서 함께 일하는 힘이 얼마나 중요한지 다시금 깨달았다.

또한, 시간 관리의 중요성도 느꼈다. 정리와 분석 과정에 예상보다 많은 시간이 소요됐고, 이로 인해 추가 분석 단계로 나아가지 못한 점이 아쉬웠다. 앞으로는 초기 단계부터 시간을 효율적으로 배분해 진행 상황을 점검하며, 더 빠르고 정확하게 작업을 마칠 수 있도록 노력해야겠다.

마지막으로, 데이터 분석은 끊임없이 사용자 입장에서 문제를 바라보는 작업이라는 것을 배웠다. 단순히 정리된 데이터를 보는 것이 아니라, 그 안에 담긴 사용자의 고민과 니즈를 이해하고, 이를 해결할 수 있는 방향으로 설계를 발전시키는 것이 궁극적인 목표다. 이 과정에서 내가 더 성장하고 있음을 느낄 수 있었다.

11일차(2024.11.15)

프로젝트 학습 내용

사용자 행동분석

사용자가 제품이나 서비스와 상호작용하는 방식을 연구하고 이해하는 과정 사용자 여정의 다양한 단계에서 사용자의 행동을 추적하고, 데이터를 수집, 정리, 시각화, 분석하는 것을 포함한다.

행동 분석의 중요성

• 사용자 경험 개선: 사용자의 행동과 문제점을 이해함으로써 전반적인 사용자 경험을 개선할 수 있음 이는 내비게이션 단순화나 개인화된 제품 경험 제공 등으로 이어질 가능성이 높음

• 데이터 기반 의사결정: 제품의 어떤 측면이 잘 작동하고 있는지, 어떤 부분이 개선이 필요한지에 대한 통찰력 제공 이를 통해 제품 혁신과 개선에 대한 정보에 기반한 결정 도출 가능

• 개인화 및 맞춤화: 사용자 행동 데이터를 활용하여 개별 사용자나 특정 사용자 그룹에 맞춤화된 경험을 제공

• 사용자 행동에 대한 깊은 이해: 행동 분석은 고객과 그들이 제품과 상호작용하는 방식, 브랜드를 어떻게 인식하는지에 대해 더 깊이 있는 이해를 제공함

• 지속적인 최적화: 행동 분석은 지속적인 과정으로, 사용자 행동의 변화에 따라 디지털 플랫폼을 적응시키는 데 도움 이를 통해 기업은 경쟁력 유지 가능

• 성공 측정: 디지털 플랫폼의 성공을 추적하고 측정 가능 이는 UX 디자인의 효과성을 평가하고 데이터에 기반한 의사결정을 내리는 데 도움을 줌

각 Task 실습

실습과정 및 결과

회고

사용자 행동 분석을 진행하면서, 기준을 어떻게 설정할지 고민이 많았는데, 결국 부동산 경험 여부로 나누는 것이 가장 적합하다는 결론에 도달했다. 그래서 부동산 경험이 적은 유저는 "light user," 경험이 많은 유저는 "heavy user"로 설정하여 각각의 행동 패턴을 분석했다.

카드소팅 작업 덕분에 각 유저의 행동과 생각을 분류하기 훨씬 편했다. 특히 경향성을 파악하는 기준에 대한 고민이 깊었는데, 나와 팀원의 자취 경험을 되짚으며, 처음 부동산을 접했을 때의 감정이나 가장 필요했던 정보가 무엇이었는지 생각해보았다. 그리고 카드소팅 인사이트를 통해 현재 시점에서 경험이 쌓인 뒤에 어떤 정보가 더 유용했는지도 비교해보며, 사용자들이 원하는 정보를 찾는 과정에서 어떤 방식으로 탐색하고, 무엇에 의존하는지를 이해할 수 있었다.

그 결과, 사용자 행동 분석 기준을 탐색 방식, 정보 수집 패턴, 그리고 신뢰하는 정보의 종류라는 세 가지 주요 요소로 정리했다. 더 세부적으로 나눌 수도 있었지만, 우선순위를 고려해 이 세 가지가 사용자 경험에 큰 영향을 미친다고 판단했다.

사용자 행동그룹을 구분할 때 라인과 채워진 버전으로 시각적으로 구분하려 했는데, 강사님께서 이 방법만으로는 구분이 명확하지 않다고 하셔서 컬러 차별화를 추천해주셨다. 지금 돌아보니, 컬러를 다르게 사용하는 것이 직관적으로 이해하기에 훨씬 유리했다. 동일한 색상으로 구분을 시도했던 부분은 오히려 혼란을 줄 수 있다는 점을 이번에 확실히 깨달았다.

12일차(2024.11.18)

프로젝트 학습 내용

퍼소나(Persona) 정의

절대다수의 모수로 진행된 설문조사 데이터를 토대로, 주된 사용자를 정의한다.

퍼소나란?

퍼소나는 제품이나 서비스를 사용하는 사용자를 대표하기 위해 가상으로 만든 인물

• 뭉뚱그려진 평균적인 캐릭터가 아닌, 구체적이고 실체적인 개인으로 선택
• 수요자들이 어떤 동기를 가지고 행동하는지 유추할 수 있음

각 Task 실습

실습과정 및 결과

회고

이번 프로젝트에서는 부동산 경험이 없는 사람과 많은 사람을 각각 페르소나로 설정했다. 부동산 경험이 없는 사람은 기숙사 생활을 하다가 첫 자취를 시작하는 대학생으로, 경험이 많은 사람은 직장에 다니면서 직장과 가까운 곳으로 이사하려는 직장인으로 설정했다. 페르소나의 각 상황을 잘 설정했다고 생각했지만, 각 페르소나 유저의 goal과 needs의 방향성을 구체화하는 데 어려움을 느꼈다.

처음에는 각 페르소나가 원하는 방의 조건에만 집중해 접근했지만, 팀원과 함께 논의하면서 방을 구하는 성향과 과정에 더 주목해야 한다는 의견에 설득되었다. 단순히 방의 조건보다는 방을 구할 때의 행동 패턴과 결정 과정을 분석하는 것이 우리가 설정한 페르소나의 목표와 니즈를 더 정확히 반영할 수 있다는 설명이 타당하게 느껴졌기 때문이다. 덕분에, 페르소나의 goal과 needs의 방향을 수정하고 더 구체적이고 현실적인 사용자 경험을 반영할 수 있었다.

이 과정에서 느낀 점은, 나만의 의견에 집착하지 않고 팀원의 논리적인 설명을 통해 유연하게 수용할 수 있었던 점이다. 우리 팀원들 모두가 논리적인 사고를 바탕으로 토론에 임하는 성향을 가지고 있어 의견을 조율하는 과정이 매우 원활했고, 이러한 협업이 굉장히 행복하게 다가왔다. 프로젝트를 진행하면서 서로의 의견을 경청하고 설득하는 과정을 통해 다양한 관점을 반영한 결과물을 만들어낼 수 있었다는 점이 이번 프로젝트의 가장 큰 수확 중 하나라고 생각한다.

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

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

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)를 추가하여 화면을 제작해볼 것

실습과정 및 결과

회고

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

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

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

11일차(2024.11.15)

개념 정리

버튼 type과 상태 정리

* 컬러 스타일

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

시멘틱컬러(Sementic)

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

과제

요구사항

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

실습과정 및 결과

회고

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

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

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

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

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

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

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

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

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

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

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

12일차(2024.11.18)

개념 정리

스타일(Styles)

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

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

1. Color

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

2. Text

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

3. Effect

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

4. Grid

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

그룹별 관리 방법

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

과제

요구사항

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

실습과정 및 결과

회고

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

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

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

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

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

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

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

Week 3

2024.11.06(Wed)

• 사용자 리서치 - 정성조사 분석

  2024.11.08(Fri)

• 사용자 리서치(정량조사) - 질문 설계 및 실행

  2024.11.11(Mon)

• 사용자 리서치(정량조사) - 온라인 설문조사 시작
• 어피니티 다이어그램

7일차(2024.11.06)

프로젝트 학습 내용

사용자 리서치 - 정성조사 분석

사용자 관찰일지와 인터뷰를 통해 우리가 설정한 가설이 검증이 됐는지를 분석한다. 그 과정에서의 페인 포인트와 인사이트도 함께 도출한다.

Task 실습

실습과정 및 결과

회고

우리는 유저에게 하나의 목표를 주고, 그 목표에 도달하기까지 우리의 예상 시나리오(Task)가 제대로 이행되는지 관찰하고 분석했다. 반면, 다른 팀들은 각 기능을 독립적인 Task로 설정해 사용자가 이를 수행하는 과정을 평가했다.

물론 개선해야 할 특정 기능이 명확할 때는 기능별 task 방식이 더 적합할 수 있다. 그러나, 사용자가 목표에 도달하는 과정을 분석할 때는 목표를 주고 도달 시간과 과정에서 어려운 점을 파악하는 게 더 유용하다고 생각했다. 물론 프로젝트마다 접근 방식이 달라질 수 있으니 내 생각을 단정할 수는 없지만 말이다.

이번에 장표 정리의 중요성을 다시금 깨달았다. 우리 팀은 나름대로 로우 데이터(raw-data)를 잘 보이게 정리했다고 생각했지만, 정작 강사님이 우리의 프로젝트 내용을 브리핑할 때 그 자료를 바로 찾지 못하는 상황이 자주 발생했다. 우리에게는 모든 데이터의 위치와 맥락이 익숙하더라도, 처음 접하는 사람에게는 그렇지 않을 수 있다는 점을 간과했던 것 같다. 특히 발표나 브리핑 상황에서는 원하는 정보를 빠르게 찾아 전달할 수 있어야 한다는 점이 중요하다.

그 내용을 조사한 사람은 이미 조사한 내용과 그 맥락을 충분히 알고 있지만, 처음 보는 사람 입장에선 어디에 어떤 내용이 있는지 파악하기 어려울 수 있다. UX의 핵심은 사용자 경험이다. 우리가 왜 이 문제를 탐구했고, 이를 어떻게 해결하려 노력했는지 그 과정을 명확히 전달해야 한다. 우리의 목표는 문제를 개선하는 것이며, 이를 잘 따라올 수 있게 만드는 것도 UXUI 디자이너로서의 책임이다.

강사님께 보여주는 것이 끝이 아니더라도, 어느 누가 보더라도 내용을 쉽게 찾고 이해할 수 있도록 정리해야 한다. 특히 커리큘럼 일정상 장표 정리에 시간을 많이 할애하기 어려운 점을 감안하면, 이제부터는 이 부분에 더 힘을 실어야겠다는 필요성을 절실히 느꼈다.

8일차(2024.11.08)

프로젝트 학습 내용

사용자 리서치 - 정량조사 설계 및 배포

사용자 설문조사 설계 방법

1. 설문조사 설계 및 기획
   • 앱 개선을 위한 사용자 실태조사 내용 20개 정도의 질문을 기획한다.
   • 처음 질문은 넓고 쉽게, 점점 좁고 특정 단어를 사용한 질문으로 유도한다.
   • 특정 단어에 대한 설명이 필요하다면 추가한다.
   • 가설검증과 더불어 추가 인사이트를 얻기 위해 서술형 질문도 추가한다
2. 설문 폼 작성
3. 모수 100인을 목표로 설문 링크 배포
4. 네이버 구글 설문 결과 확인
   • 주요 인사이트를 토대로 도표화하여 정리
   • 초기 가설 검증을 위해 수치로 정리

Task 실습

실습과정 및 결과

회고

정량조사는 확실히 정성평가보다 어려운 점이 많은 것 같다. 정성평가의 경우, 인터뷰 대상자 한 사람에 집중하며 그 사람의 문제를 깊이 파악할 수 있다. 필요에 따라 질문을 유연하게 바꿔가며 상세한 정보를 얻을 수 있는 반면, 정량조사는 불특정 다수가 설문을 쉽게 이해하고 참여할 수 있도록 명확하고 간결한 질문 설계가 필수적이다.

특히, 질문이 많아지면 참여자들이 피로감을 느껴 설문을 끝까지 완료하지 않을 가능성도 높아지기 때문에, 질문의 수와 난이도를 적절히 조정하는 것도 큰 과제다.

우리 팀이 질문을 설계할 때 가장 신경 썼던 부분은 질문의 편향성이었다. 예를 들어, "우리가 개선하고자 하는 점이 이러이러한데, 그 중 가장 관심 가는 것은 무엇인가요?" 같은 질문은 사용자가 실제로 느끼는 문제를 파악하기 어렵게 만든다. 이는 우리가 원하는 답을 유도하는 것이며, 오히려 사용자의 진짜 목소리를 놓칠 위험이 있다. 이런 실수를 피하기 위해, 사용자 입장에서 실제로 불편했던 점을 자유롭게 말할 수 있도록 질문을 설계하는 것이 중요하다고 느꼈다.

설문조사 기간이 짧아 목표한 모수를 채울 수 있을지는 걱정이지만, 그래도 도전해보는 것이 중요하다. 이번 경험을 통해 설문 설계와 데이터 수집에 대한 실질적인 인사이트를 얻을 수 있을 것이라고 믿는다.

9일차(2024.11.11)

프로젝트 학습 내용

어피니티 다이어그램

정성적 데이터들 사이의 규칙과 연관성을 발견하여, 해당 내용을 토대로 인사이트를 도출하는 방법론. 방대한 데이터들을 수집한 후 그룹핑하는 과정을 거쳐 유의미한 인사이트를 도출하는 방법이다.

꿀팁 ! 마지막 인사이트 정리 시 하나의 페이지는 진행과정 어피니티 다이어그램을 따로 만들고,결론 단계에서는 3가지의 문제가 정의가 되고, 그를 통해 우리가 해결해줄 수 있는 것이 무엇인지를 공급자로써의 생각을 인사이트로 정리한다.

Task 실습

실습과정 및 결과

회고

이번 프로젝트에서 팀원들의 활약 덕분에 예상보다 빠르게 많은 사람들이 설문조사에 참여해줘서 정말 다행이었다. 주말 내내 머리를 맞대고 고심하며 질문을 설계한 덕분인지, 응답자들이 우리가 해결하고자 하는 문제를 실제로 사용자들도 느끼는 문제라고 인식하고 있는 듯 했다. 부디 우리의 질문 설계가 편향된 답을 유도하지 않았기를 바랄 뿐이다. 물론 설문 분석이 끝나야 정확히 알 수 있겠지만, 현재로선 우리가 의도한 문제의 방향성을 잘 잡았다는 느낌이 든다. 11일 당일에 만든 어피니티다이어그램에는 온라인 설문조사 내용까지 들어가있진 않지만 그래도 문제의 카테고리와 우선순위 잡는데만 해도 충분히 도움이 될 거 같다. 13일날 100명 정도의 모수가 모였을 때 본격적으로 하나씩 분류작업이 들어갈 것이다.

어피니티 다이어그램을 작성할 때는 팀원들이 지친 듯 그림을 그리며 잠시 쉬는 모습도 보였지만, 각자 맡은 역할을 책임감 있게 잘 해내 주어서 그저 고마울 뿐이다. 가끔은 나만 너무 조급해하는 게 아닐까 싶은 순간도 있지만, 그럴 때마다 함께 힘내자고 긍정적으로 격려해주는 팀원들 덕분에 즐겁게 작업을 이어갈 수 있다. 내가 혹시라도 조급한 마음에 분위기를 흐릴까 미안한 마음도 있다. 하지만 그런 순간마다 팀원들이 서로 응원하며 밝은 분위기를 만들어 주기에, 덕분에 나 역시 다시 힘을 얻을 수 있다. 팀워크의 힘을 다시금 느끼며, 함께 오래도록 좋은 팀워크를 이어갈 수 있었으면 좋겠다.(아닌거 같기도 하고 살려주세요)

+번외(빼빼로데이) 우리 팀원 막내가 준 과자와 강사님이 주신 빼빼로😋

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

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

Week 3

2024.11.06(Wed)

• 오토레이아웃(컨테이너), 썸네일

  2024.11.08(Fri)

• 컴포넌트와 인스턴스

  2024.11.11(Mon)

• 베리언트(프로퍼티와 텍스트)

7일차(2024.11.06)

개념 정리

오토레이아웃 - 컨테이너

• 컨텐츠 : 안에 있는 소스
• 컨테이너 : 밖에 있는 프레임

자동 사이즈 변경 시 무엇이 기준이 될까?

"하드웨어 변경 시 기준은 컨테이너!"

• 반응형 = UI 하드웨어의 변경시 자동사이즈변경
• 반응형 컨텐츠 제작시 모바일사이즈에서 패드사이즈로 변경된다면, 가장 크게 변동되는 사이즈는 화면 전체의 사이즈 즉 컨테이너의 사이즈
• 세로사이즈는 스크롤이 가능하므로 무한 확장이 가능하며 가로사이즈가 변경된다.

썸네일

해당 디자인의 아이덴티티를 표현하거나, 디자이너의 아이덴티티를 담는다.

과제

요구사항

• 오토 레이아웃을 이용하여 반응형 디자인 제작
• 썸네일 개성있게 만들어보기

실습 과정 및 결과

회고

컨테이너와 콘텐츠가 아직 살짝 헷갈리긴 하지만, 이전부터 계속 해오던 작업이라 무리 없이 진행할 수 있었다. 다만, 다른 분들이 반응형 디자인에서 어려움을 겪는 모습을 보며 실무에서 이를 구현하려면 정돈된 레이어 정리 기술이 필요하겠다는 생각이 들었다. 기초를 탄탄히 다져야 이후 작업이 수월해질 테니 지금부터 더욱 신경 써야겠다고 느꼈다.

어떤 내용으로 반응형 디자인을 만들어볼지 고민하다가, 내 소개 페이지를 만들어 보기로 했다. 단순한 정보 나열보다는 조금 더 특별하게 보여주고 싶었다. 이전에 노션 이력서에 적어둔 내 소개를 다시 옮겨 적으며, 기분이 묘했다. 여기까지 오는 동안의 시간들이 스쳐 지나가며, "7년 전의 나는 지금의 나를 상상했을까?" 하는 생각에 잠시 빠지기도 했다.

하지만 현재의 나는 내가 잘하고 뿌듯함을 느낄 수 있는 일을 찾기 위해 노력하고 있는 중이고, 그 기회를 잡기 위해 준비하는 과정에 있다는 걸 잊지 말자. 열심히 하며 차근차근 나아가다 보면 목표에 닿을 수 있을 거라 믿는다.

8일차(2024.11.08)

개념 정리

컴포넌트(Component)

컴포넌트는 버튼, 카드, 입력 필드와 같은 재사용 가능한 디자인 요소. 한 번 만들어 놓으면 동일한 스타일과 속성을 가진 요소를 프로젝트 내에서 여러 번 사용할 수 있다.

• 마스터 컴포넌트(Master Component): 컴포넌트의 원본. 부모의 개념모든 인스턴스는 마스터 컴포넌트를 기준으로 동기화.
• 인스턴스(Instance): 마스터 컴포넌트를 복제하여 사용한 개별 요소. 자식의 개념. 마스터 컴포넌트의 변경사항이 모든 인스턴스에 자동으로 반영됨.

컴포넌트의 주요 기능

• 일관성 유지 컴포넌트를 사용하면 디자인 시스템의 일관성을 유지할 수 있습니다. 예를 들어, 버튼 스타일을 변경하면 모든 인스턴스 버튼이 자동으로 업데이트됩니다.

• 효율적인 수정 마스터 컴포넌트를 수정하면 프로젝트 전체에 반영됩니다. 버튼 색상, 텍스트 스타일, 간격 등을 한 번의 수정으로 적용할 수 있어 시간을 절약할 수 있습니다.

• 오버라이드(Override) 인스턴스는 마스터 컴포넌트의 기본 속성을 유지하면서 특정 요소(텍스트, 색상, 아이콘 등)를 개별적으로 변경할 수 있습니다. 변경된 부분은 마스터 변경에도 유지됩니다.

• Nested Components 컴포넌트 안에 다른 컴포넌트를 포함할 수 있습니다. 이를 통해 더 복잡한 UI 요소를 계층적으로 관리할 수 있습니다.

과제

요구사항

• 컴포넌트를 활용하여 티켓 카드와 리스트를 만들어볼 것

  실습 과정과 결과

회고

컴포넌트를 만들면서 의문이었던 점은 보통은 컴포넌트를 설명할 때 컴포넌트에 속성을 부여할 수 있는 기능인 property 기능을 다음에 설명해주시는 것이었다. 그게 컴포넌트를 쓰는 이유라고 생각하는데... 살짝 의아하긴 했지만 확실히 컴포넌트라는 기능이 처음 쓰시는 분들께는 어려운 기능이고, 나도 처음 이해하는 데 시간이 조금 걸렸던 부분인 만큼 아마 좀 더 길게 설명하시려고 하는 거 같다.

9일차(2024.11.11)

개념 정리

Property(속성) 기능

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

property 종류

• Varent 베리언트 - 열의 선택 (좌표개념) ▪︎ 다양한 상태를 한곳에서 관리 ▪︎ 버튼 컴포넌트를 예로 들어보면, 기본 상태, 호버 상태, 비활성화 상태 등을 각각의 컴포넌트로 만들 필요 없이 Variant로 한 번에 관리 가능 ex) 버튼 기본: 파란색 배경, 텍스트 "Submit" 버튼 호버: 진한 파란색 배경 버튼 비활성화: 회색 배경, 비활성화 텍스트

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

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

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

과제

요구사항

• 컴포넌트와 더불어 Property(Varient와 Text 속성)을 활용해볼것

실습 과정 및 결과

회고

컴포넌트를 만들고 속성을 부여하는 자체는 어렵지 않았지만, 작업을 진행하며 손이 조금 느리다고 느껴졌다. 평소에는 나름 손이 빠르다고 생각했는데, 생각보다 더 빠른 사람들이 많아서 살짝 놀랐다. 30명 중 7번째로 제출했지만, 예전처럼 상위권에 들지 못하자 내심 오기가 생겼다. 평소엔 항상 1-2등으로 제출했었는데 말이다.

물론, 손이 빠른 게 전부는 아니다. 중요한 건 이 기술을 활용해 문제를 얼마나 효과적으로 해결할 수 있는가다. 또한, 제출 시간이 늦어진 이유 중 하나는 팀원이 모르는 부분을 물어봐서 알려주느라 그랬던 것도 있다. 만약 그게 원인이라면 과제 제출이 늦어지는 건 전혀 문제가 되지 않는다고 생각한다. 제출 시간이 조금 늦더라도, 내가 아는 것을 공유함으로써 팀원이 성장에 도움을 받는다면 그게 더 가치 있는 일이다.

내게는 이 수업 시간을 통해 피그마 실력을 단순히 키우는 것보다, 우리 팀원들이 무리 없이 피그마를 잘 활용할 수 있도록 돕는 것이 더 중요하다. 우리 팀이 모두 잘 해내고, 함께 성장하는 모습이 정말 바라는 목표다. 팀 전체가 성장할 수 있다면, 그 과정에서 내가 기여했다는 사실만으로도 충분히 뿌듯함을 느낀다.

+번외

이전에 면접을 봤던 회사 2곳이 있는데 2-3주가 지나도록 연락이 오지 않는다. 심지어 한 회사는 나에게 커피챗 제안을 주고 면접을 꼭 보고싶다고 말했던 회사였는데...요새는 불합격 통보보다 무통보가 더 잔인하다는 걸 느낀다. 괜찮다고 다독이지만 마음이 힘든건 어쩔 수 없나보다. 그저 잊고 더 나은 내가 되기 위해 노력하며 더 좋은 기회를 잡을 수 있게 노력하는 수밖에 없다.

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

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

Week 2

2024.10.30(Wed)

• 휴리스틱 평가
• 사용자 리서치

  2024.11.01(Fri)

• 사용자 리서치(정성조사) - 사용자 관찰일지 / 인터뷰 설계

  2024.11.04(Mon)

• 사용자 리서치(정성조사) - 사용자 관찰일지 / 인터뷰 진행

4일차(2024.10.30)

프로젝트 학습 내용

휴리스틱 평가

휴리스틱 평가란?

• 사용자 인터페이스(UI)의 사용성을 평가하는 방법 중 하나
• 전문가들이 미리 정의된 사용성 원칙(휴리스틱)을 기준으로 인터페이스를 검토하고 문제점을 식별하는 과정

  휴리스틱 평가의 장점

• 비용 효율적: 사용자 테스트에 비해 상대적으로 저렴
• 신속한 실행: 짧은 시간 내에 수행 가능
• 초기 단계 적용: 개발 초기 단계에서도 적용 가능
• 다양한 문제 발견: 광범위한 사용성 문제를 식별 가능

휴리스틱 평가의 단점

• 전문가 의존성: 평가자의 경험과 지식에 크게 의존
• 실제 사용자 피드백 부족: 실제 사용자의 직접적인 피드백을 얻기 어려움
• 맥락 고려 부족: 사용자의 실제 사용 맥락을 완전히 반영하기 어려움

휴리스틱 원칙과 예시

01. 시스템 상태의 가시성(Visibility of System Status) - 적절한 시간 내에 사용자에게 진행중인 정보를 지속적으로 제공해야 한다 ex: 파일 업로드 진행 상태 표시바 등

02. 시스템과 현실 세계의 일치(Match Between System & Real World) - 일상생활에서 사용하는 대상의 모습 그대로, 사실에 가깝게 표현해야한다. -> 사용자가 가지고 있는 멘탈모델을 그대로 활용하여, 사용자에게 익숙한 것, 관례를 따르는 것이 중요하다. ex: 이메일 전송 시 '보내기' 버튼 사용 등

03. 사용자 제어와 자유(User Control and Freedom) - 사용자가 실수를 했다면, 바로 원하지 않는 상태에서 벗어날 수 있는 출구를 만들어야 한다. ex: 뒤로가기, 실행취소, 메시지 보내고 바로 취소하기 기능 제공 등

04. 일관성과 표준(Consistency and Standards) - 의문을 가지지 않고, 매끄럽게 서비스를 이용하기 위해, 기존의 다른 플랫폼에서 이미 학습한방식을 존중한다. ex: 좋아요. 즐겨찾기, 장바구니 등의 아이콘, 모든 페이지에서 동일한 네비게이션 메뉴 유지 등

05. 오류 예방(Error Prevention) - 오류가 발생하지 않도록 디자인을 제공한다. ex: 중요한 작업 전 확인 대화상자 표시, 비밀번호 조건 알려주기 등

06. 기억보다는 인식(Recognition Rather than Recall) - 사용자가 기억할 필요없이 만들어야 한다. ex: 복잡한 명령어 대신 아이콘 사용, 검색기록, 읽은부분은 회색음영으로 표현 등

07. 유연성과 효율성(Flexibility and Efficiency of Use) - 경험이 숙련된 사용자들을 위해 단축키 및 고급설정 등의 메뉴를 제공한다 ex: 자주 사용하는 기능에 대한 단축키 제공 등

08. 미적이고 미니멀한 디자인(Aesthetic and Minimalistic Design) - 관련이 적은 요소나 당장 필요하지 않은 장치는 모두 배제한다 ex: 필수 정보만 표시하고 부가 정보는 숨기기, 심플한 검색창 등

09. 오류 인식, 진단, 복구 지원(Help Users with Errors) - 오류가 발생했을때 가능한 쉽게 보여주고, 무엇이 문제인지 빨리 알려준다 ex: 오류 발생 시 명확한 메시지와 해결 방법 제시, 회원가입시 잘못 기입한 부분과 이유 알려주기 등

10. 도움말 및 설명서(Help and Documentation) - 문제가 생겼을때 빠르게 문제해결단서를 찾을 수 있도록 가이드를 제공한다 ex: 상황에 맞는 도움말 기능, 문제해결 가이드 제공 등

사용자 리서치

• 검색(Search)을 통해 정보를 찾는 행위에서 한단계 더 나아가 사용자를 관찰하고 인터뷰 하여 이를 정리 및 분석해 인사이트를 도출하는 것
• 사용자와 시장환경 등 제품이나 서비스의 가능성을 고려해 여러 관점에서 자료를 수집하고 분석하는 활동
• 데스크리서치, 경쟁사분석, 휴리스틱평가 등을 통해 어느정도 문제점에 대해 파악이 되었다면, 실제 사용자들도 그렇게 생각하는지 검증해 볼 수 있는 단계

정성조사와 정량조사의 차이

*통계 관련 용어

각 Task 실습

실습과정 및 결과

회고

휴리스틱 평가를 진행하며, 각 항목을 기준으로 모든 화면을 반복적으로 평가하는 방식이 나은지, 아니면 전체적인 화면 흐름에 맞춰 각 항목을 평가하는 것이 더 좋은지 고민됐다. 이로 인해 내가 진행한 휴리스틱평가가 매끄럽지 못한 점이 아쉽지만, 다행히 몇 가지 유의미한 인사이트를 뽑아낼 수 있었고, 다른 팀원들 역시 좋은 인사이트를 많이 찾아주셔서 분석 자체는 수월하게 진행할 수 있었다.

항목별 반복 평가는 특정 휴리스틱 항목에 대해 모든 화면을 반복적으로 검토하면서 심층적인 분석이 가능하다. 특히 특정 사용성 문제를 집중적으로 파악하는 데 유용한 방법이다. 반면, 화면 흐름 기반 평가는 전체적인 흐름 속에서 각 항목을 평가해 사용자 경험의 연속성과 흐름을 이해하는 데 도움이 된다. 이는 실제 사용자 여정에 따라 발생할 수 있는 문제를 파악하는 데 효과적이다.

강사님께 여쭤본 결과, 현재 우리는 UX에 대해 좀 더 상세히 분석하는 것이 목적이므로 항목별 반복 평가가 더 적합하다고 하셨다. 이 질문을 했던 시점이 이미 평가에 혼란을 느끼고 우왕좌왕한 이후라, 질문을 좀 더 빨리 했다면 좋았겠다는 아쉬움이 남는다.

머릿속에 생각이 너무 많아서 혼란을 느꼈던 것 같기도 하다. 이제는 생각만 하지 말고 일단 적어보고 정리하는 습관을 길러야겠다고 다짐했다.

5일차(2024.11.01)

프로젝트 학습 내용

사용자 리서치 - 정성평가

사용자관찰 방법

1. 관찰방법 및 테스크설계

• 특정앱의 기능이 목적이 아닌, 일반적인 앱 이용목적과 행위를 기준으로 설계
• 이때 데스크리서치와 휴리스틱평가를 통해, 중요하다고 생각한 기능이나, 사용자가 어려워할 것이다라고 가설을 세우고 검증한다는 생각으로 해당 플로우 2개정도의 태스크설계를 진행한다. (ex. 앱을 연다. 로그인을 한다. 커피를 주문한다. 주문지점을 확인한다. 쿠폰을 사용한다. 등)

2. 홀수팀과 짝수팀이 한팀이 되어, 서로의 사용자 관찰대상자가 되어준다.

• 1팀-2팀 / 3팀-4팀 / 5팀-6팀
• 총 5장의 관찰일지

3. *관찰시에는 어떤 도움을 주지 않는다. *
4. 이후 사용자 심층 인터뷰 진행

• 사용시 특히 불편했던 부분에 대해서 인터뷰 추가 및 해당 앱 화면 캡쳐해서 기록
• 앱 사용 모습 영상 또는 사진 기록(선택)
  • 사용자가 어떤 부분에서 어떻게 어려워 했는지 다시 보기 위한 목적 (ex. 커피쿠폰을 받기 위해 어떤 버튼을 눌러서 실패를 했었는지 다시 체크)

5. 인사이트정리 ➔ 인사이트 정리 및 초기 가설 검증

사용자 인터뷰를 위한 효과적인 질문 설계 방법

개방형 질문 사용 "예/아니오"로 답할 수 있는 폐쇄형 질문을 피하고, 상세한 답변을 유도하는 개방형 질문을 사용합니다. ex: "이 기능을 어떻게 사용하셨나요?" (O) / "이 기능이 유용했나요?" (X)

중립적 표현 질문에 편견이나 선입견을 담지 않도록 주의합니다. ex: "이 제품의 장단점에 대해 말씀해 주세요." (O) / "이 훌륭한 제품에 대해 어떻게 생각하세요?" (X)

구체적 경험 유도 일반적인 의견보다는 구체적인 경험을 묻습니다. ex: "최근에 이 앱을 사용하면서 좌절감을 느낀 경험이 있다면 설명해주세요." (O) / "이 앱의 사용성에 대해 어떻게 생각하세요?" (X)

행동 중심 질문 사용자의 실제 행동에 초점을 맞춥니다. ex: "이 문제를 해결하기 위해 어떤 단계를 거치셨나요?" (O) / "이런 상황에서 보통 어떻게 하시나요?" (X)

후속 질문 준비 더 깊은 통찰을 얻기 위한 후속 질문을 준비합니다. ex: "그렇게 느끼신 이유가 무엇인가요?", "좀 더 자세히 설명해주실 수 있나요?"

맥락 고려 사용자의 환경과 상황을 고려한 질문을 준비합니다. ex: "집에서 이 제품을 사용할 때와 직장에서 사용할 때의 차이점은 무엇인가요?"

시간순 접근 사용자의 경험을 시간 순서대로 탐색합니다.

ex: "이 서비스를 처음 알게 된 때부터 지금까지의 경험을 순서대로 말씀해주세요."

각 Task 실습

실습과정 및 결과

회고

이전에 정리한 인사이트를 바탕으로 가설을 검증하는 과정에서, 시나리오 제작 시 조건과 개수 설정에 어려움이 있었다. 시나리오를 세부적으로 나누면 여러 상황을 세밀하게 반영할 수 있어 다양한 사용자 유형을 이해하는 데 도움이 되지만, 반대로 전체적인 사용자 흐름이나 일관된 경험을 파악하기는 어려웠다. 반면, 시나리오를 하나로 통일하면 사용자에게 흐름을 명확하게 보여줄 수 있어 특정 상황에서 겪는 어려움을 한눈에 파악할 수 있지만, 다양한 상황을 충분히 반영하기는 어렵고 예상치 못한 환경에서의 문제를 발견하기 힘들다는 한계가 있었다.

팀원들과 논의한 결과, 집을 구할 때 대다수의 사용자가 허위/사기 매물을 피하려는 기본적인 욕구가 공통적으로 존재하기 때문에 시나리오를 세부적으로 나누지 않아도 된다고 판단했다. 또한, 자본 조건에 따라 1인 가구가 전세와 월세 중 선택하는 기준이 분명해, 시나리오를 두 가지로 나누는 것까지만 고려하고 그 이상으로 나누지 않기로 결정했다. 아무래도 시간적 여유가 많지 않아 시나리오가 지나치게 세분화되면 데이터 수집과 분석에 필요한 시간이 부족할 것이다.

가설을 세우고 시나리오를 만든 이후에는 인터뷰 질문과 사용자 관찰일지의 Task 설정이 좀 더 수월했다. 시나리오가 하나로 통일된 점도 유리하게 작용했고, 팀원 중 한 명이 인터뷰 경험이 있어 질문 리스트를 효율적으로 구성할 수 있었다.

다만, 고려해야 할 요소가 많다 보니 사용자의 행동을 어디까지 통제할지 정하는 것은 여전히 쉽지 않았다. 그래도 우리에게 필요한 데이터를 얻기 위한 시나리오를 설계할 수 있어 다행이라고 생각한다. 이제 이 시나리오를 바탕으로 인터뷰이들이 잘 수행해 주기를 기대한다.

6일차(2024.11.04)

프로젝트 학습 내용

사용자 리서치(정성조사) - 사용자 관찰일지 / 인터뷰 진행

5일차의 내용을 바탕으로 실제 사용자 관찰일지와 인터뷰를 진행한다.

각 Task 실습

실습과정 및 결과

5팀과 사전에 협의하여 사용자 인터뷰를 위한 방을 미리 예약하고, 각 팀이 순차적으로 방을 사용해 인터뷰를 진행했다. 우리 팀은 방을 가장 먼저 사용하면서 6팀의 팀원을 한 분씩 초대하여 약 30분 동안 관찰 및 인터뷰를 진행했다. 구체적으로, 사용자 행동 관찰을 15분, 추가 인터뷰를 15분씩 진행하여 인당 총 30분을 할애했다.

분석 대상은 부동산 앱인 '다방'이었고, 앱 특성상 실제로 방을 구해본 경험이 있는 사용자와의 인터뷰가 중요했다. 그러나 인터뷰 대상자 중 해외 거주 경험만 있는 경우가 있거나, 국내에서 직접 방을 구해본 경험이 없는 분들이 계셨다. 이에 팀 내부에서도 경험이 있는 구성원을 대상으로 자체 인터뷰를 추가로 진행해 보다 심층적인 분석을 할 수 있도록 준비했다.

#

결과 및 회고

사용자 인터뷰를 진행하면서 내가 인터뷰의 진행을 담당하게 되었는데, 인터뷰이의 특성에 따라 유동적으로 대처해야 하는 부분이 많아 쉽지 않았다. 미리 준비해 둔 질문들이 있었지만, 인터뷰이의 답변이 이후 질문과 중복되기도 하고, 예상하지 못한 배경을 가진 인터뷰이의 경우 우리가 필요로 했던 데이터와 다른 답변을 주기도 했다. 시간 관계상 필요한 조건을 모두 충족한 사용자를 찾기 어려워 바로 옆 팀의 멤버를 인터뷰하게 되었는데, 그런 상황에서도 인터뷰이의 경험을 최대한 활용해 원하는 데이터를 얻기 위해 노력했다.

다행히 이전에 인터뷰 경험이 있어서 비교적 능숙하게 진행할 수 있었고, 친화력 덕분에 인터뷰를 자연스럽게 이끌어낼 수 있었다. 추가적으로 필요한 내용은 팀원들이 코멘트를 통해 보완해주어 부족한 부분을 채우고 긴급한 상황에도 대처할 수 있었다.

고심 끝에 필요한 데이터를 더 확보하기 위해 팀원 일부가 추가 인터뷰를 진행하기로 했고, 시간이 부족해 더 이상의 인터뷰는 어려운 상황이었지만, 스스로를 헤비 유저로 가정해 기존 데이터에 대한 사용자 관찰일지를 작성해보았다.

이전에 혼자서 인터뷰를 진행해본 경험은 있지만, 팀으로 역할을 분담해 인터뷰를 진행한 것은 이번이 처음이었다. 혼자 준비해야 했던 부분들을 팀원들과 체계적으로 나누어 진행하니 각자의 강점이 돋보였고, 부족한 부분을 상호 보완할 수 있었다. 인터뷰 대상이 다소 아쉽기는 했지만, 충분한 데이터를 얻었으니 다음 시간에는 이를 기반으로 핵심 포인트를 분석해봐야겠다.

+열심히 한 우리 6팀 첫 뒷풀이😆

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

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

Week 2

2024.10.30(Wed)

• 점편집,이펙트,익스포트,테마변경

  2024.11.01(Fri)

• 플러그인

  2024.11.04(Mon)

• 오토레이아웃, 단축키

4일차(2024.10.01)

개념 정리

점편집

벡터 객체의 개별 점과 곡선을 조정하여 모양을 세밀하게 수정할 수 있는 기능

이펙트(effect)

시각적 효과를 객체에 적용하여 디자인에 깊이와 질감을 추가하는 기능

• Inner shadow : 객체 내부에 그림자를 적용하여 요소가 눌린 듯한 효과를 줌
• Drop shadow : 객체 외부에 그림자를 생성하여 3D 효과를 주고 배경에서 요소를 돋보이게 함
• Layer blur : 객체의 경계를 흐리게 하여 특수 효과를 만들거나 요소에 익명성을 부여
• Background blur : 선택한 객체 뒤의 모든 요소에 블러 효과를 적용하여 특정 부분에 집중도를 높임

익스포트(export)

디자인의 전체 또는 일부를 다양한 이미지 형식(PNG, JPG, SVG 등)으로 내보내는 기능 해상도 설정:

• 1x: 원본 크기로 내보내기. 주로 웹용 이미지에 사용
• 2x: 원본 크기의 2배로 내보내기. 고해상도 디스플레이나 Retina 디스플레이 대응용으로 사용
• 3x: 원본 크기의 3배로 내보내기. 주로 모바일 앱 개발에서 사용
• ! 특정 크기로 내보내야 할 때(웹사이트 로고나 앱 아이콘 등 정확한 크기가 요구할 시)
  • "512w": 너비(width)가 512px
• "512h": 높이(height)가 512px

파일 형식:

• PNG: 투명도를 지원하는 래스터 이미지 형식. 웹 그래픽에 적합합니다24.
• JPG: 압축률이 높은 래스터 이미지 형식. 사진이나 복잡한 이미지에 적합합니다24.
• SVG: 벡터 그래픽 형식. 크기 조절이 가능하며 아이콘이나 로고에 적합합니다24.
• PDF: 여러 페이지를 포함할 수 있는 문서 형식. 프레젠테이션이나 인쇄용 문서에 적합합니다

  테마 변경

  피그마 인터페이스의 밝은 모드와 어두운 모드를 전환

과제

요구사항

• 점편집, 둥근 모서리 기능을 활용하여 로고와 심볼, 아이콘을 제작해볼것
• effect를 활용하여 뒷배경을 적용해볼것

  실습 과정

  

결과 및 회고

결과

회고

기능적인 부분은 빠르게 작업했지만, 분위기에 맞는 적절한 사진을 찾는 게 예상보다 어려웠다. 예제 사진을 캡처해 사용하려 했지만 해상도가 많이 깨져서, 비슷한 분위기의 다른 사진을 찾기 위해 최대한 노력했다.

빠르게 완성한 후 다른 분들의 과제도 살펴보았는데, 동일한 방식으로 작업하신 분들도 있었지만, 본인만의 개성을 살려 더욱 보기 좋게 디자인하신 분들도 있어 인상적이었다. 단순히 배운 기능을 사용하는 것만이 아니라, 그 안에서 자신만의 디자인 스타일을 살려 과제를 해보는 것도 하나의 업그레이드라고 느꼈다. 주어진 과제를 넘어서 어떻게 더 개선할 수 있을지를 고민하는 것이 나 자신을 성장시키는 중요한 전략임을 새삼 깨달았다.

5일차(2024.11.01)

개념 정리

플러그인(plug-in)

외부 개발자들이 만든 추가 기능으로, 피그마의 기본 기능을 확장하고 작업 흐름을 개선하는 도구

플러그인 사용방법

툴바 플러그인	커뮤니티 플러그인

플러그인 리스트

• Unsplash : 이미지 서칭

• Feather icon : 아이콘(다양하지만, 정재되지 않음)

• Iconfy : 아이콘(일관되어있지만, 적은수)

• Lorem ipsum : 더미텍스트 (랜덤문장생성)

• Flowchart : 플로우차트 제작

  

  #

• Remove BG : 뒷배경 삭제 - API key를 받아오면 피그마 내부에서 플러그인 실행 가능

과제

요구사항

실습 과정

결과 및 회고

결과

회고

플러그인을 많이 안다고 생각했는데, 막상 모르는 플러그인이 많다는 걸 깨달았다. 정확히 말하자면, 플러그인 구동 방법을 잘 몰랐던 것 같다. 예를 들어, 배경 제거 플러그인인 remove.bg는 항상 웹에서만 사용했는데, API Key를 받아 플러그인으로 구동하면 웹보다 훨씬 깔끔하게 배경을 제거할 수 있다는 점이 다소 충격적이었다.

점 편집 기능은 할수록 익숙해지는 것 같다. 이번엔 과제 작업을 하며 프로필 캐릭터를 커스터마이징해보았는데, 조금 더 개성을 살려보지 못한 부분이 아쉽긴 하지만 기본 형태를 유지하면서도 나름의 개성을 표현했다는 점에서 만족한다.

한 가지 아쉬웠던 점은 강사님께서 대부분의 분들께 Text Alignment에 대한 피드백을 주셨지만, 왜 그 부분이 중요한지에 대한 설명이 부족했던 것이다. 그래도 한분 한분께 일일이 피드백을 주시는 게 궁금했는데, 강사님께서 각자의 과제에 집중하다 보면 다른 분들의 피드백을 듣기 어려울 수 있어 개별적으로 설명해주신다고 하셨다. 강사님의 세심함에 내심 감동을 받았다.

6일차(2024.11.04)

개념 정리

오토 레이아웃

여러 해상도에서도 뷰(View) 가 알맞는 화면을 출력할 수 있도록 조건을 걸어 자동으로 크기와 위치를 맞춰 배치하는 기능

단축키

화면 상단 help -> keyboard shortcut 클릭 시 화면 하단에서 단축키 리스트 확인 가능

과제

요구사항

• 오토 레이아웃을 활용하여 디자인할 것

  실습 과정

  

결과 및 회고

결과

회고

오토 레이아웃을 만드는 것은 어렵지 않았지만, 이미지나 이모티콘 소스를 찾는 작업이 늘 쉽지 않다. 기존 이미지나 그림보다 더 나은 것을 찾으려다 보니 신중하게 고르게 되고, 시간이 걸리는 것 같다. 우리 팀원 중 피그마를 배우고 있는 분들은 오토 레이아웃을 어려워하시는 게 느껴졌는데, 그런 부분들을 설명해 주면서 내가 이 기능을 제대로 이해하고 있음을 다시 한번 체감할 수 있었다.

나는 피그마의 단축키를 일일이 찾아가며 익혔는데, 단축키를 한 번에 볼 수 있는 기능이 있다는 것을 처음 알았을 때 살짝 충격이었다. 피그마를 처음 배울 때 알았다면 더 쉽게 익혔을 것 같기도 하지만, 피그마 기능을 잘 다룰 수 있게 된 지금이야말로 단축키의 진가를 제대로 활용할 수 있는 시점이라 생각한다. 앞으로 단축키를 더 적극적으로 사용하면서 피그마 작업 속도가 한층 빨라질 것을 기대하고 있다.

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

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