hik063

스나이퍼팩토리x유데미] UX/UI 실무초격차 디자인 전문가 양성 과정 - 13주차 후기(기업 프로젝트)

hik063 — Sun, 2 Feb 2025 13:40:12 +0900

기업 프로젝트 3-4주차

3주차, 우리 팀은 여전히 퍼소나에 대한 수정을 반복하고 있다.
프로젝트 초기 방향성에서 여러 차례 변경이 이루어졌고, 그로 인해 같은 과정을 반복적으로 수정하는 상황에 직면했다.
이러한 상황은 멘토님들의 피드백을 수렴하는 과정에서 발생한 것으로 보인다.
멘토는 “산 교육을 하는 것 같다”거나 “실제 회사에서는 바뀌는 일이 늘 있는 일이다”라는 피드백도 주셨다.

멘토님들의 피드백을 받아들여 프로젝트 방향이 자주 변경되다 보니,
이제는 팀원 간의 소통을 통해 더 주도적으로 프로젝트 방향성을 이끌어가기로 결심했다.
우리가 처음 구상했던 중요한 기능들을 최대한 살리되,
멘토님들의 피드백을 반영하여 사용성을 더욱 향상시키는 방향으로 정리하기로 했다.

이 과정에서 가장 중요한 부분은 사용성을 어떻게 개선할 것인가 하는 점이었다.
원래는 사용자 유형을 기준으로 구분했으나, 고민을 거쳐 사용자의 위치를 기준으로 구분하는 방식에 대해서도 고민했다.
이렇게 변경하면, 각 사용자 그룹이 보다 직관적이고 편리하게 앱을 이용할 수 있다.

앞으로도 팀원들과 지속적으로 소통하며, 멘토님들의 피드백을 적극적으로 반영하여 프로젝트를 완성해 나갈 예정이다.

스나이퍼팩토리x유데미] UX/UI 실무초격차 디자인 전문가 양성 과정 - 12주차 후기(기업 프로젝트)

hik063 — Fri, 17 Jan 2025 23:12:51 +0900

※본 포스팅은 일기 형태로 작성되었음을 알립니다※

기업 프로젝트 2주차

"I'm just a chill guy"

프로젝트를 진행하며 스스로 되뇌이려는 문구다.
곱씹는 성격 탓에, 많은 내용을 face value로 받아들이기 위한 노력의 만트라라고 할까...☆

주말 동안 아르바이트를 하며, 동료와 나눈 대화가 이번주의 회고에 영향이 있어 짧게 적어보고자 한다.

주문이 많은 러시 타임 이후에 재점검 시간.
나 : "침착하게 일을 처리하고 싶어요."
동료 : "침착함은 경험에서 나오는 것 같아요."

나 : "지금부터 더 좋아질 일만 남았네요!"
동료 : "그러면 좋죠^^"

친근하게 대해준 동료 아르바이트생의 말에서 이번 한주를 보낼 원동력을 얻었다.

동료와 좋은 사이다. 일방적인 생각은 아닐 것이라 믿어 의심치 않는다..^^

월요일 4일차

오늘은 저번 주 금요일에 진행한 멘토링을 토대로 하루의 목표를 정리해봤다.

1. 퍼소나 수정

2. 아이데이션

3. 아이데이션으로 도출한 기능에 대한 정의서 작성

목표를 정리하고, 팀원들에게 의견을 공유하고 대화를 하며 생각을 확산하는 방식으로 하루를 보냈다.

반짝이는 아이디어와 빠른 추진력을 가진 팀원들 덕분에, 오늘 정리할 내용들을 빠듯한 시간 내에 다 정리 할 수 있었다.
멘토링 이후, 반응이 좋았던 특정 기능들을 위주로 좀 더 고도화하자고 얘기를 마친 후에 하루가 마무리 되었다.

수요일 5일차

나의 리더십에 계속해서 의문을 가진 채로
수요일 아침에 새싹캠퍼스에 도착하자마자 "좋은 리더는 어떤 리더인지, 그리고 나라는 사람은 어떻게 하면 좋을지"
교수님의 의견을 듣고자 찾아뵈었다.

교수님은 흑백요리사에 나오는 팀전 에피소드를 예시로 말씀을 해주셨다. (트리플스타 팀전)
'튀는 사람보다 팀원과 같은데 정리만 해주는 사람인 것 같다.',
'각 팀원의 장점을 파악하고 팀원별로 소통 할 수 있도록,
팀장이 없어도 잘 작동하는 팀이 될 수 있도록' 하는 것이 이상적인 리더의 모습인 것 같다고 해주셨다.

그리고 지난 2달 가량 봐온 나의 모습으로 '시간 관리'에 힘을 쓰고,

나서서 직접 하는 것 보다 팀원에게 역할과 일을 분장하는데 힘을 쓰면 좋겠다고 하셨다.

교수님의 말씀을 머리로는 이해했으나, 실현이 어려울 것 같다는 마음이 일렁였다...
그래도 해보는 데까지는 해보자는 마인드로 오늘은 To-do list에 시간 제한을 두고 일과를 보내보았다.

시간을 의식하면서 진행하니, 원하는 분량의 작업을 할 수 있었다.
그리고 팀원들과 함께 생각 확산에 빠지게 되는 상황보다,
멀리서 상황을 바라보고, 목표를 잡는 역할을 작게나마 수행할 수 있었다.

금요일 6일차

오늘은 시러핑이 된 것만 같은 하루였다...
팀의 아이디어와 방향성들이 너무 좋았지만,
부족한 시간과 방대해지는 내용에 중간중간 맺고 끊는 역할을 해야했다.
워낙 Passive한 성향이 강한 탓에 'No'를 하는 것이 어렵게 느껴졌고,
그만큼 'No'를 잘못하게 될까 걱정이 되었다.

그래도 다행히 팀은 잘 따라주었고, 시간 내로 대부분의 내용을 정리하여 멘토님들께 전달할 수 있었다.
멘토링 후에 크게 잡고 가던 두 꼭지 중에서 하나를 후순위로 두고 결과물의 도출이 용이한 내용에 집중을 하고자 했다.
그래도 후순위로 둔 꼭지의 내용이 흥미롭고, 실험적인 측면이 있어 지속적으로 멘토링을 받는 방향으로 이끌고자 한다.

현업에서는 수익성과 실현가능성이 저조한 프로젝트를 탐색하기 어렵지만,
지금의 우리는 학생이고, 훌륭한 멘토님들이 이끌어주고 있는 상황이기에 이 기회를 알차게 써보자는 의견이었다.

스나이퍼팩토리x유데미] UX/UI 실무초격차 디자인 전문가 양성 과정 - 11주차 후기(기업 프로젝트)

hik063 — Tue, 14 Jan 2025 16:36:01 +0900

※본 포스팅은 일기 형태로 작성되었음을 알립니다※

기업 프로젝트 1주차

저번 주 금요일 기업 선택 당일, 도메인이 부동산인 프로젝트를 선택했다.

도메인은 맞지 않았지만, 멘토님의 경력과
데이터를 깊이 있게 다룰 수 있는 기회가 될 것 같아 선택했다.

새싹에서는 1~5순위의 희망 기업 설문 후, 중간평가 점수를 기준으로 팀을 배정하는데, 운 좋게 원하는 팀에 합류할 수 있었다.

팀 구성 후에 팀 빌딩과 역할 분담을 진행했는데, 얼떨결에 팀장이 되었다...

성인이 된 이후로는 줄곧 혼자 일하거나 막내로 서포트만 진행했기에 긴장이 많이 되었다.

지난 프로젝트에서 일정 부분 리딩을 하며 스스로 부족했던 부분을 많이 느꼈기에,

더욱 팀장의 역할에 부담감을 가지고 있었다.

그럼에도 주어진 역할이고, 리더십을 키울 기회라 생각하고 노력하기로 했다.

리더의 역할은 멘토님들과의 커뮤니케이션과 일정 조율, 프로젝트 리드가 우선시되었다.

금요일에는 우선 국내외 시장에서 사용되는 부동산 앱을 벤치마킹하고 확인해보는 시간을 가졌다.

월요일 1일차

월요일 아침, 강사님께서 각 팀별로 보조로 활용할 수 있는 내용들과
4주간의 시간 배분에 대한 플로우를 공유해주셨다.
우리 팀은 전달받은 내용이 없어 우선 부동산 시장과 앱 시장에 대한 데스크리서치를 진행했다.
얼마 지나지 않아 멘토님들과 함께하는 단체 카톡방이 생성되었고,
연락이 닿자마자 일정에 대한 질문과 데스크리서치를 하며 생긴 궁금증들을 문서로 정리하여 보내드렸다.

이날 멘토님들과 일정 조율을 진행하면서 팀장 역할의 무게감을 다시 한 번 실감했다.
회사 생활에서 익숙했던 갑/을 관계의 소통 방식을 택했더니, 프로젝트 일정에 차질이 생기는 상황이 발생했다.

이 부분은 한참 후에야 깨달은 내용인데, 이후에도 비슷한 이슈가 계속 이어졌다...ㅎㅎ

수요일 2일차

화요일 저녁에 월요일에 보낸 내용에 대한 답변을 받을 수 있었다.
편의상 이번 주에 한해 금요일에 2시간 동안 멘토링을 진행하기로 했다.
또한, 전달받은 방향성이 사전에 조사한 방향과 다른 부분이 있어 이를 재작업했다.
아울러, 퍼소나의 유저 시나리오 작업을 우선적으로 요청받아 퍼소나 구축 작업도 함께 진행했다.

금요일 3일차

수업이 없는 날에는 보통 7~8시간 정도의 수면을 취한다.
이날도 핸드폰 수신함을 열기 전까지는 평범한 하루와 다르지 않았다.
그러나 수신함에는 운영진의 멘토링 관련 안내 메시지가 도착해 있었고, 그 순간 잠이 확 달아났다...ㅎㅎ

급히 팀원들에게 가능한 일정을 확인하고 상황을 전달한 뒤, 멘토님들께 해당 일정을 공유했다.

다행히 팀원 과반수가 원했던 대로 금요일에 4시간 동안 멘토링을 진행하는 일정으로 조율할 수 있었다.

금요일 당일에는 퍼소나를 정리해 시트를 만들고, 팀이 구상한 방향성과 QA를 정리하여 멘토님들께 전달했다.
첫 멘토링을 진행하면서 그동안의 걱정이 많이 해소되었다.
멘토님들이 생각하신 프로젝트의 방향과 우리의 생각이 일치하는 부분이 많았고,
적극적인 피드백도 받을 수 있었다.

(특히, 텍스트 자료보다 이미지 자료를 통해 피드백을 받는 것이 더 효율적이라는 점도 확인할 수 있었다.
바쁘셔서 확인이 어렵기 때문인 것 같다.)

스나이퍼팩토리x유데미] UX/UI 실무초격차 디자인 전문가 양성 과정 - 10주차 후기

hik063 — Thu, 2 Jan 2025 23:54:18 +0900

https://www.suck.uk.com/products/cat-top-scratcher/

UXUI 현직자 강의

이번주는 2일을 거쳐 현직자의 강의를 들었다.
강의를 진행해주신 현직자님은 탄탄한 경력을 소유하신 현 Leolap에서 PM을 맡고 계신 분이었다.

1일차에는 크게 실무에서 하게 될 일과 회사 유형별 특징에 대해 요약정리를 해주셨다.

이전의 정규 수업에서 배운 내용과 대부분 일치하는 내용이 많아, 다른 내용만 정리하겠다.

1일차 - 실무에서 하게 될 일

디자인 QA

개발만 QA를 하는 줄 알았는데, 디자인 또한 기획 의도와 시안에 맞게 구현 되었는지

확인하기 위한 QA를 진행한다고 한다.

QA 진행의 과정은 아래와 같다.

QA 기획 (인원[평균 2인], 디바이스, 도메인, 웹환경[naver, google etc)
기획 내용 : 담당자/날짜/도메인/우선순위/디바이스/오류 타입/발생상황/기대효과/file media/적용상태/브라우저/개발 코멘트
QA 테스트 세팅 (도메인별, 화면별 확인 해야 할 내용 작성)
QA 진행
QA 시트 작성
이슈 보고(어려운 문제들에 대해 개발단 / 기획단과 논의해 해결책 도출)
디자인 수정
반영 확인 -핸드오프

노코드 툴을 이용한 퍼블리싱

취업하는 회사의 유형에 따라 퍼블리싱 업무를 진행하게 될 수도 있다.

노코드 툴을 활용해 퍼블리싱을 진행하는데, 이때 사용할 수 있는 툴과 퍼블리싱의 과정은 아래와 같다.

랜딩페이지 퍼블리싱(프레이머)
커머스 세팅(아임웹, 카페 24 등)
도메인 연결
유지보수 제공(CMS 관리)

기타 프론트앤드 지원 업무

2일차 - UI 디자인

정규 수업에서 UI 위주의 수업보다 UX 심화 수업을 들었다는 것을 알게 된 현직자님은
2일차 강의를 디자인 실무 프로세스와 자기소개서 작성 위주로 진행하셨다.

웹사이트 디자인 실무 프로세스

1. 기획 : 해상도 설정 메뉴구조 위주의 설명

간략한 메뉴 구조도 작성
와이어프레임 설계
디자인 시스템 / 파운데이션 설계 > 개발 전달
레퍼런스 서치 인터렉션 레퍼런스 요청 多

2. 디자인 : 해상도별 디자인 프리뷰 제공

1차 디자인
데스크탑 버전 디자인(1920-1280) > 개발 전달
반응형 디자인 제공

3. 핸드오프 : 디자인으로 알기 어려운 인터렉션, 애니메이션 설명

스토리보드 작성
인터렉션 설명 제공
디자인QA

어플리케이션 디자인 실무 프로세스

1. 기획 : 모든 화면에 대한 상세한 설정

상세한 IA 작성
정책 기획서 작성
와이어프레임 설계
레퍼런스 서치 메인화면 톤 앤 매너

2. 디자인 : 웹디자인 보다는 규격에 맞춘 디자인(인터렉션 低)

1차 디자인 필요화면 4~5화면만 디자인
전체 화면 디자인
디자인 시스템 정리

3. 핸드오프 : 정책 기획도 함께 고려한 세세한 핸드오프

개발 명세서 작성
프로토타입 연결
디자인 QA

앱디자인 프로세스

1. RFP 수집 항목

프로젝트 목표 파악
과업범위 파악
기능 파악
클라이언트가 원하는 디자인 스타일 파악
1. 키워드 혹은 프로세스

2. 기획(메뉴트리)작성 프로세스

메인 기능을 바탕으로 1뎁스 메뉴 작성
1뎁스 페이지에 들어가는 기능 작성
상세로 이어지는 내용들을 차례대로 2, 3뎁스 블록으로 작성
작성된 블록끼리 플로우 연결 제작 화면 확인 가능 *5뎁스 이상은 지양한다. *링크가 있을 경우 하나의 뎁스로 친다

3. 컨셉 디자인 프로세스

정해진 디자인 키워드와 유사한 레퍼런스 서치
키 컬러 설정
컬러와 레퍼런스를 결합해 각기 다른 스타일의 UI 3타입(각 4-5페이지)제작 및 설명 기입
- 홈화면/복잡도가 높은 화면/리뉴얼 프로젝트의 경우 가장 개선이 필요한 화면
회의를 통해 컨셉 UI를 결정한다

4. 디자인시스템 구성 프로세스

필요한 에셋 항목들을 노션/엑셀 등으로 정리
개발 요건 확인
- CSS로 개발/특정 라이브러리 활용 등
에셋 제작
- Variant / Boolean / Swap Instance 등의 기능을 활용해 에셋을 활용도 높게 제작

자기소개서 작성 이유와 팁
눈에 띄는 성과 증명이 어려운 신입의 경우 자기소개서 작성이 필요하다.
또, 하드스킬 증명이 어려우니 소프트스킬로 어필하기 위해 자기소개서를 작성할 필요가 있다.

너무 길지 않게
지원 자격에 있는 키워드 중심으로
디자이너의 언어로 - 보편적 키워드 보다 디자인 용어 활용
명쾌한 설명으로 - 한눈에 이해 되는지 확인
함께 일하고 싶은 사람으로 - 협업 가능 어필

스나이퍼팩토리x유데미] UX/UI 실무초격차 디자인 전문가 양성 과정 - 9주차 후기(프로젝트)

hik063 — Tue, 24 Dec 2024 23:51:33 +0900

프로젝트 마무리와 발표

이번주 프로젝트 블로그는 일자 구분없이 작성하겠다.
어떻게 한주가 지나갔는지 모를 정도로 정신없이 바쁜 기간이었다.

계속해서 프로젝트(프로토타입) 완성에 심혈을 기울였고,
이를 통해 배운 하드스킬/소포트스킬들에 대해 말하고싶다.

1. 컬러 접근성

웹 사용성을 위한 색 표준이 존재한다.
사용하고자 하는 색들의 대비감을 확인하여, 3:1 이상일 경우 적합, 이하일 경우 부적합으로 사용을 지양한다.
또, 대비도에 따라 각각 굵은 텍스트, 얇은 텍스트, 도형 사용에 대한 안내를 해준다.
이를 고려함으로 색약, 약시 사용자도 편하게 서비스 이용이 가능하다.

WebAIM: Contrast and Color Accessibility - Understanding WCAG 2 Contrast and Color Requirements

Contrast and Color AccessibilityUnderstanding WCAG 2 Contrast and Color Requirements You are here: Home > Articles > Contrast and Color Accessibility Article Contents Current page: Page 1: Understanding WCAG 2 Contrast and Color Requirements Introduction D

webaim.org

2. SPSS 중복답변 평균(설문)

가설 검증에 실패하며, 앞의 정량 조사에서 강조하는 내용을 일부 바꿔야 했다.
이때 중복답변이 가능한 설문의 데이터를 사용해야했는데,
중복 답변의 경우 평균값을 어떻게 구한는 것인지 감이 잡히지 않아 구글 선생을 찾았다.

구글링 후에 SPSS 프로그램을 사용하여 중복선택지의 평균을 낼 수 있다는 것을 알 수 있었다.
참고한 영상과, SPSS 다운로드 링크를 첨부한다.

https://youtu.be/61N_x9plfY8?si=kOK3nMxKKY7A7T98

IBM SPSS 소프트웨어

IBM SPSS 소프트웨어의 고급 통계 분석 기능을 활용하여 기회를 발견하고, 효율성을 개선하며, 위험을 최소화할 수 있습니다.

www.ibm.com

[스나이퍼팩토리x유데미] UX/UI 실무초격차 디자인 전문가 양성 과정 - 9주차 후기(강의)

hik063 — Tue, 24 Dec 2024 23:50:54 +0900

디자인 시스템_241218

디자인 시스템이란 무엇인가?

디자인 시스템은 제품과 서비스의 디자인을 위한
종합적인 표준 가이드라인과 재사용 가능한 컴포넌트들의 집합이다.

단순한 스타일 가이드를 넘어 조직 전체의 디자인 언어를 정의하고 통합하는 전략적인 프레임워크에 해당된다.
* 서비스의 목적에 맞도록 일관되게 구성한 공유된 규칙

디자인 시스템의 목표

일관성 : 사용자 경험의 통일성 보장
효율성 : 디자인/개발 프로세스 최적화
확장성 : 제품 성장에 따른 유연한 대응
협업 : 팀 간 원활한 커뮤니케이션

디자인 시스템의 구성요소

브랜드 아이덴티티
파운데이션 : 디자인 시스템의 기초를 형성하는 핵심 요소들
컴포넌트 : 파운데이션을 기반으로 구축된 재사용 가능한 UI 요소

파운데이션	컬러, 타이포그래피, 레이아웃·스페이싱, 아이콘·이미지
컴포넌트	기본 컴포넌트, 복합컴포넌트, 패턴 라이브러리

컴포넌트의 종류 참고 사이트

User Interface Elements Every Designer Should Know

Understand key UI elements and how users interact with them. Become a better designer and learn about UI elements from our examples.

www.uxpin.com

화면 디자인과 발표 준비_241220

이전에 학습한 휴리스틱 원칙이 잘 적용되었는지,
너무 정적인 화면 구성으로 디자인을 하고 있는 것은 아닌지 검토한다.
*정적인 화면 구성을 지양해야 한다고 강사님께서 지도를 해주셨으나,
상황에 따라 정적인 구성이 효과적이라는 생각이다.

휴리스틱 분석의 10가지 기준

Visibility of System Status 시스템 상태 눈에 보이게 효용
ex) 다운로드 진행상황을 알려주는 바
Match Between System & Real World 시스템과 현실세계 연결
ex) 컴퓨터의 쓰레기통
User Control And Freedom 시스템 제어의 자유
ex) 앱스토어 다운로드 도중 취소 버튼
Consistency And Standards 일관성과 표준
ex) 제이콥의 법칙과 통하는 내용으로 웹표준이 대표적인 예시다.
Error Prevention 에러 방지하기
ex) 에러가 있을 시에 수정 보완 해주는 것
Recognition Rather than Recall 기억보다 인식
ex) 이미 봤던 유튜브 영상에 빨간 하단 바가 있는 것
Flexibility And Efficiency of use 유연성과 효용성
ex) 각종 프로그램들의 핫키
Aesthetic and Minimalistic Design 심플하고 아름다운 디자인
ex) 구글의 검색창
Held Users with Errors 오류를 인식하고 탈출할 수 있도록 돕기
ex) 오류에 대한 팝업 알림
Help and Documentation 도움말과 문서화
ex) 서비스의 Q&A 탭

게슈탈트의 이론에 빗대어, 디자인 언어가 개연성이 있는지 확인한다.
또, 계층이 잘 잡혀있는지 확인한다.

게슈탈트이론 관련 글

게슈탈트 이론에 기반한 UI 디자인

우리는 항상 이전의 경험이나 시각적 패턴을 서로 비교하려 합니다. 그리고 그 내용을 서로 연결하며, 형태를 인식하고, 정보를 분류하고, 간격을 메우는 방식으로 큰 그림을 그립니다. 디자이

www.pentapost.co.kr

이력서와 포트폴리오_241223

수업이 절반가량 진행되었으니, 어느덧 취업준비에 박차를 가할 시기가 다가왔다.
이번에 만든 프로젝트를 포트폴리오에 담을 수 있게 형태를 바꾸고,
포트폴리오와 이력서 포멧을 만들어야 한다.

강사님께서 이력서와 포트폴리오 관리에 좋은 리소스들을 공유해주셨다.

이력서 사이트-서핏
서핏은 디자이너들을 위한 링크드인이라 생각하면된다.
다양한 분야와 직군의 디자이너/개발자들의 이력서와 포트폴리오 일부를 확인 할 수 있다.
*현업 종사자들이 어떻게 정리하는지 분석하기 좋다.
https://directory.surfit.io/

서핏 디렉토리 - 함께 성장하는 커리어 커뮤니티

새 탭에서 펼쳐지는 맞춤 커리어 콘텐츠. 매일 성장하고 더 멋지게 일하세요!

directory.surfit.io

포트폴리오 사이트-비핸스
어도비에서 운영하는 비핸스는 크리에이티브를 위한 웹/소셜 이라고 생각하면 좋다.
다양한 분야의 프로들이 어떻게 포트폴리오를 가꾸어나가는지 확인 할 수 있고, 나의 포트폴리오를 만들어서 관리하기도 좋다.
https://www.behance.net/galleries/ui-ux

UI/UX :: All Categories :: Behance

www.behance.net

[스나이퍼팩토리x유데미] UX/UI 실무초격차 디자인 전문가 양성 과정 - 8주차 후기(프로젝트)

hik063 — Tue, 17 Dec 2024 23:54:30 +0900

UT 결과 분석_241211

오늘은 저번 시간에 진행한 UT 결과를 분석했다.

짧은 시간임에도 불구하고, 주변인과, 새싹 내부 품앗이로 어느정도의 모수를 채울 수 있었다.

메이지의 결과와 화면 소요시간, 질의 답변들을 취합하였고,
기획 단계에서 작성한 가설을 기반으로 검증 여부를 파악했다.

이전에 진행한 설문/조사 과정에서도 느낀 부분이지만,
정성조사가 아닌 정량조사에서는 명확하고 구체적으로 선택을 할 수 있게끔 해줘야 한다.
Maze 무료 버전을 사용하다보니 물어볼 수 있는 질문에 제한이 있었는데,
이 때문에 질문들을 한곳에 모아서 진행했다.

명료한 선택 사항도 없고, 모수도 적은 설문조사는 결과를 도출하는 과정이 어렵기에
추후에 또 설문을 진행하면 명료한 결과가 나올 수 있게 구성을 해야할 것 같다.

디자인 시스템 구성과 A/B 테스팅_241213

앞의 UT 분석 단계에서 우리팀의 가설이 잘 해결 되지 않는 내용들이 있어, 수정안으로 A/B 테스팅을 했다.
의외로 '이름'과 '네이밍'에 대한 피드백도 있어 이 부분에 대해서도 수정이 진행됐다.

이번 프로젝트 전반의 어려웠던 부분 중에 하나가 이런 전문용어/전문성에 대한 것이었다.
러닝도 스포츠이기에 전문 용어가 있고, 고도화 된 트레이닝이 방법들이 있다.
우리는 양 끝단 (헤비 러너, 신규 유저)의 유저를 확보하기 위해 확장하는 방향성으로 프로젝트를 진행했고,
신규 유저와 헤비 러너 사이의 간극이 생겼다.
또, 우리의 테스트 서브젝트에 (초기 정량조사 제외) 러너들이 많지 않아 명료한 결과를 내기 어려웠다.
*이 부분을 어떻게 해결해야 하는지 아직도 명확하게 모르겠다.

무드보드, 디자인 터치_241216

[스나이퍼팩토리x유데미] UX/UI 실무초격차 디자인 전문가 양성 과정 - 8주차 후기(강의)

hik063 — Tue, 17 Dec 2024 23:52:20 +0900

디자인 시스템_241211

디자인 시스템이란 무엇인가?

디자인 시스템은 제품과 서비스의 디자인을 위한
종합적인 표준 가이드라인과 재사용 가능한 컴포넌트들의 집합이다.

단순한 스타일 가이드를 넘어 조직 전체의 디자인 언어를 정의하고 통합하는 전략적인 프레임워크에 해당된다.
* 서비스의 목적에 맞도록 일관되게 구성한 공유된 규칙

디자인 시스템의 장점

일관성
여러 프로젝트에 적용 가능한 표준화 된 구성요소를 기반으로 하여, 디자인 일관성 유지할 수 있다.
시간단축 / 비용절감 / 생산성향상
재활용 가능한 컴포넌트를 통해 작업시간을 단축하여

서비스를 시장에 빠르게 출시하여 테스트할 수 있으며,
생산성이 향상되어 더 적은 수의 디자이너가 많은 것을 만들 수 있다.
원활한 협업과 소통
공통된 시각언어리소스로, 협업시 이해관계자들의 소통을 도움을 준다.
쉬운 유지보수
개발에 필요한 리소스를 줄이고, 유지보수에 도움을 주어 리스크를 최소화할 수 있다.
확장성
서비스를 확장할때 더 빠르고, 오류는 적은 디자인을 만들 수 있다.
하나의 디자인 시스템으로 확장된 서비스

디자인 시스템 요소

컬러
텍스트
레이아웃
컴포넌트
아이콘
디자인토큰

디자인 시스템 제작 순서

파운데이션 정의 Foundations
컬러, 폰트, 레디우스, 효과, 규격, 등의 기초적인 단계 구축
컴포넌트 제작 Components
파운데이션을 토대로 일정한 규칙을 가진 컴포넌트 생성
템플릿 제작 Templates
컴포넌트를 조합하여 서비스 UI 설계
다양한 상황에 쉽게 적용할 수 있도록 제작

참고 영상
https://www.youtube.com/watch?v=f930uBcMj7w

아토믹 디자인

디자인 시스템의 표준과도 비슷한 '아토믹 디자인'.
아토믹 디자인은 화학의 원소 개념을 차용하여 디자인 시스템을 구축하는 방법론이다.
마크 보턴(Mark Boulton)이 개발한 이 방법론은
가장 작은 디자인 요소부터 복잡한 인터페이스까지 체계적으로 구성하는 혁신적인 접근법이다.

구분	원자(Atoms)	분자(Molecules)	유기체(Organisms)	템플릿(Templates)	페이지(Pages)
내용	가장 기본적이고 추상적인 디자인 요소	여러 원자가 결합된 가장 작은 기능적 컴포넌트	여러 분자가 결합된 복잡한 UI 섹션	유기체들이 배치된 페이지 수준의 와이어프레임	실제 콘텐츠가 적용된 최종 인터페이스
예시	색상, 폰트, 버튼, 입력 필드	검색 입력 필드 + 버튼 조합	헤더, 네비게이션, 제품 카드	전체 페이지의 골격과 흐름 정의	-

아토믹 디자인은 단순한 디자인 방법론을 넘어 디자인 시스템의 철학이다.

작은 요소부터 전체 시스템까지, 디자인의 본질적 구조를 이해하고 혁신하는 강력한 접근법이니,
한번 쯤 원문을 읽는 것을 추천한다.
https://atomicdesign.bradfrost.com/chapter-2/

Atomic Design Methodology | Atomic Design by Brad Frost

Learn how to create and maintain digital design systems, allowing your team to roll out higher quality, more consistent UIs faster than ever before.

atomicdesign.bradfrost.com

디자인 토큰_241213

디자인 토큰이란 무엇인가?

디자인 토큰은 디자인 시스템의 핵심 요소로,
디자인의 기본 속성을 추상화된 방식으로 저장하는 최소 단위의 정보다.
색상, 글꼴, 간격, 애니메이션 등 디자인의 근본적인 속성을
코드와 독립적으로 관리할 수 있게 해주는 혁신적인 방법론이다.

* 공통적으로 반복되는 요소들의 값을 규칙(시스템)에 따라 정리한 것이다.

로컬 라이브러리에 디자인 파운데이션, 컴포넌트들을 토큰으로 정리한다.

라이브러리 퍼블리싱_241216

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

라이브러리 퍼블리싱이란 정리해둔 디자인 토큰들과 컴포넌트가 있는 Figma 파일을
온라인으로 퍼블리싱 하는 것을 말한다.

Figma 파일을 정리하여 퍼블리싱 한 후에, 다른 파일들에서 불러와서 사용 할 수 있어

동일한 요소들로 혼동 없이 디자인이 가능하다.

[스나이퍼팩토리x유데미] UX/UI 실무초격차 디자인 전문가 양성 과정 - 7주차 후기(프로젝트)

hik063 — Tue, 10 Dec 2024 23:20:31 +0900

와이어프레임 제작_241204

원래 기획은 오늘 UT 설계와 배포까지 하는 일정이었으나,

팀의 인원이 부족하고 설계할 화면은 많아 일정이 지연되었다.

계속해서 와이어프레임과 프로토타이핑의 지옥에서 벗어나지 못했다..
팀원들과 '분명 실무는 이렇게 힘들게 하지 않을 것 같다'라는 얘기를 나눴고,
현업 경력이 있는 팀원은 프로토타이핑을 이렇게 심도 있게 만드는 것은 흔치 않은 일이라고 해주셨다.
(약간의 위안이 되었다)

프로토타이핑 과정에서 개선하고자 하던 부분들이 잘 반영이 되었는지, 어떻게 개선하면 좋을지, 등
여러 앱을 벤치마킹하고 구상한 화면 중에서 선택하는 과정에 생각 이상의 시간이 소요되었다.

와이어프레임 제작과 UT 가설_241206

와이어프레임 작업에서 프로토타이핑까지 완성하고, UT 가설을 세웠다.
우리의 팀은 이전 단계에서 중요하게 여긴 세 가지 개선 사항에 맞는 내용으로 UT 가설을 세웠다.

후에 다른 팀의 와이어 프레임들을 보게 되었는데, 화면이 20~30개선에서 끝나는 반면..
우리 팀은 200여개 이상의 화면이 나온 것을 확인할 수 있었다.

다음에는 'bite off more than i can chew'를 하지 않기로 했다...

좌 : 우리팀의 프로토타입 / 우 : 'X' @tinch의 프로토타입 두 화면 모두 스파게티 프로토타입의 표본이다...

UT 테스트 제작 및 발행_241209

주말 저녁에 팀원들이 프로토타입에 추가적인 요소들을 수정하고(주말 동안 시간을 낼 수 없어 힘이 되지 못했다 ),
UT를 테스팅할 수 있는 플랫폼인 Maze에서 구축했다.

그렇게 월요일이 수업 중에 어느 정도 정리가 되어 금방 끝낼 줄 알았던 UT 테스트 발행은

오후 동안 상상도 못 할 방향으로 전개되었다.

우리 팀은 개선 사항이 크게 3가지로 나뉘어 플로우별로 UT를 총 3개 구성했다.
그중 이미 발행된 UT를 수정하려고 하니, 이미 발행된 UT는 수정이 어렵다는 사실을 알게 되었다.
또, 기존 설정을 그대로 유지하려면 개설된 테스트를 복제한 후에 수정하고 발행하면 되는데,
메이지는 한 계정에서 최대 3개의 테스트만 생성이 할 수 있었다...
(결국 발행된 테스트들은 삭제하고 다시 만들어야 했다.)

UT 테스트를 다 만든 후 교수님의 피드백을 받았는데,
팀원 모두가 앱에 너무 익숙해진 상황이어서 생각하지 못한 이슈들이 많이 발견되었다.

와이어프레임과 프로토타입을 전체적으로 미세 수정해야 했고,
앱과는 관계가 없지만 maze 테스트 시 우리의 UT 테스크가 팝업으로 뜨는 것을 확인 할 수 있었다.
심지어 화면을 클릭하면 팝업이 바로 접히기도 했다.

팝업으로 나타나는 테스크창

저녁 9시까지 타 팀에게 물어보고, A/B 테스팅을 하고, 타 팀의 허락 후에 프로토타입을 뜯어보면서 문제점을 알 수 있었다.

1. 화면이 너무 많았다.
2. 컴포넌트가 프로토타입과 같은 화면에 있었다.

각 플로우별로 피그마 파일을 만들어 필요한 화면만 남기고,
각 파일 내에서 페이지를 하나 더 만들어 컴포넌트를 다 옮겼다.

플로우별 파일 구분 전/후 화면 차이

그렇게 수정된 프로토타입 링크를 메이지에 적용하니 처음 보는 안내 문구를 맞이할 수 있었다.
아래의 화면이 뜨면 성공적으로 프로토타입이 정상적인 루트로 연결되고, 테스크 창이 정상적으로 노출된다.

좌 : 프로토타입이 무겁다는 안내 화면 / 우 : 테스크 창이 정상 노출됨

저녁 8시 10분경에 해결 방법을 알았을 때 쾌재를 부르지 않을 수 없었다...
다음에는 이렇게 숙련도 문제로 시간을 허비하지 않기로 마음을 먹으며... 오늘의 블로그 작성을 끝내겠다.

[스나이퍼팩토리x유데미] UX/UI 실무초격차 디자인 전문가 양성 과정 - 7주차 후기(강의)

hik063 — Tue, 10 Dec 2024 23:19:18 +0900

스크롤 애니메이션_241204

스크롤 애니메이션이란?

스크롤 애니메이션은 화면전환 애니메이션을 'Delay'가 아닌

컴포넌트와 인스턴스를 활용해 제작한 애니메이션이다.
아래의 자동 스크롤은 기본 스크롤 애니메이션이며, 베리어블을 이용하여 변형도 가능하다.

자동 스크롤

잘못된 프로토타입 (각 이미지에 트리거-After delay, 애니메이션-smart animation)

잘 만들어진 프로토타입 (인스턴스 별 트리거-After delay, 애니메이션-smart animation)

로띠_241206

로띠(Lottie)란?

로티(Lottie)는 혁신적인 애니메이션 라이브러리/제작 툴로,

디자이너와 개발자 사이의 창의적 격차를 해소하는 강력한 도구다.

After Effects에서 만든 복잡한 애니메이션을 웹, 모바일, 데스크톱 앱에

쉽게 통합할 수 있게 해주는 혁신적인 솔루션이다.

https://lottiefiles.com/kr/

로띠 공식 화면

프로토타이핑을 통해 만든 플로우로 애니메이션을 만들 수 있으며,
이때 화면에 중복되는 요소가 계속 존재해야한다.
*한 프레임에 없는 요소가 다른 프레임에 생성 될 수 없다.

프로젝트를 위해 팀원이 제작한 로딩바 화면, 1번 화면에 4번 화면의 모든 요소가 포함 되어있다.

최근 경쟁업체인 Phase와 Rive 툴도 많이 사용되고있다.
(Lottie의 로딩과 용량 문제가 개선 된 버전)

클론디자인_241209

오늘 수업은 클론 디자인을 하는 세션과, 관련 된 AI 플러그인 소개로 이루어졌다.

클론 디자인이란?
클론 디자인은 기존의 성공적인 디자인을 분석하고, 재해석하여 학습하는 과정이다.

이는 단순한 모방이 아닌, 우수한 UX/UI 사례로부터 깊이 있는 인사이트를 얻는 전략적 접근 방식이다.

*이런 클론 디자인은 UXUI 뿐만 아니라 모든 분야의 디자인에서도 훈련을 위해 채택하는 방식이다.

클론디자인 개인과제 캡쳐화면

클론 디자인의 목적

디자인 학습
- 전문적인 디자인 패턴과 구조를 깊이 이해할 수 있다.
- 성공적인 제품의 사용자 경험 흐름을 분석할 수 있다.
기술적 역량 강화
- 실제 우수 사례의 인터랙션 디자인을 연구할 수 있다.
- 디자인 시스템의 세부 구조와 논리를 파악할 수 있다.

클론 디자인 시 주의사항

법적/윤리적 고려사항
- 직접적인 복제나 상업적 이용은 피해야 한다.
- 학습과 연구 목적임을 명확히 해야 한다.

분석의 깊이
- 시각적 요소뿐만 아니라 UX 흐름, 인터랙션 로직을 깊이 있게 관찰해야 한다.
- 디자인 선택의 배경과 사용자 경험 의도를 이해해야 한다.

클론 디자인 플러그인

코디아 화면

올해의 피그콘에서 추가 되었다가 바로 없어진 기능인 Ai 기능을 플러그인으로 사용 할 수 있다.

피그마 플러그인 검색창에 'Codia' 검색 후, 플러그인을 실행 시킨 다음 로그인을 하면 된다.
후에 플러그인 안에 원하는 화면을 입력하면, 컴포넌트와 오브젝트 구성이 완성된 화면이 파일에 생성된다.

좌 : 이미지 파일 / 우 : ai 생성 화면 (레이어가 활성화 된 것을 확인 할 수 있다)