패스트캠퍼스 환급챌린지 29일차 : AI 시대, UX/UI부터 프로덕트 디자인까지 한 번에 끝내는 초격차 패키지 강의 후기

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

---

1. 학습 인증샷 4장 이상 포함

1. 오늘자 날짜 + 공부 시작 시각이 보이는 사진 1장
2. 오늘자 날짜 + 공부 종료 시각이 보이는 사진 1장
3. 1개 클립 수강 인증 사진 1장 (강의 화면 내용은 보이지 않도록 / 목록 캡처 추천)
4. 학습 인증샷 1장 이상 (예: 필기, 작업물, Before/After 등)

 

2.학습 후기 700자 이상 (공백 제외)

오늘 배운 핵심 내용을 정리하고, 흥미로웠던 부분과 이를 내 업무에 어떻게 적용할 수 있을지 함께 기록해 주세요.

 

 오늘은 디자인 핸드오프에 대해서 배웠습니다. 핸드오프는 완성된 디자인을 개발 구현을 위해 넘기는 과정을 말합니다. 저는 매번 이 핸드오프 과정이 정말 어려웠는데요. 개발자가 디자인을 받을 때 어떤 형태의 디자인을 원하는지도 잘 몰랐고 구현가능성에 대해서도 이해도가 낮았기 때문에 어려웠습니다. 또한, 디자인을 전달 했었는데 반응형 디자인에 맞게 그래서 개발자와의 소통을 잘하기 위해서 개발을 어느정도 이해를 해야된다는 것을 이때부터 많이 깨닫게 되어 현재 js, css, html 등 프론트에 관해 공부하고 있습니다. 

 

다음 챕터에선 개발자에게 디자인 전달 시 누락되는 8가지 요소에 대해서 배웠는데 초반에 제가 했던 실수들이 전부 담겨있더라구요. 그래서 짚어보자면 입력값 검증 후 에러케이스, 오류 페이지, 경고 및 알림, 로딩상태, 데이터가 하나도 없는 상태, 버튼, 인풋 아이콘의 상태 디자인, 비밀번호 재설정 플로우, 반응형 디자인 상태 이렇게 8가지 입니다.

첫 요소부터 살펴보면 에러케이스에서 사용자가 플레이스홀더에 잘못된 값을 넣었을 때 인데요. 에러 메시지를 어디에 어떤 문구로 어떤 방식으로 보여줘야 하는지 등을 생략하고 이름과 이메일 입력창만 디자인하여 전달하여 소통에 대한 어려움이 있었습니다. 즉 이메일 입력창에 이메일 양식에 맞게 작성하지 않았을 때 에러메시지가 떠야하는데 이런 케이스를 디자인해서 주지않았어서 개발자가 임시로 디자인하여 개발했어서 개발자분이 어려움을 겪었었던 경험이 있었습니다. 다음은 오류 페이지인데요. 404,502 등 단순히 텍스트만 전달했었는데 이런 식으로 전달하면 안되고 사용자가 다시 해결 방법을 찾을 수 있는 링크 행동 유도 보이스톤 등을 설계해야 된다고 합니다. 즉 오류가 났을 때 링크를 통해 다시 페이지에 접속할 수 있게 하던지, 버튼을 통해 다른 행동을 유도하던 이런 형태의 디자인을 제시해야 한다고 하네요. 다음은 경고 및 알림인데요. 예시로 지메일에서 첨부파일을 언급했는데 첨부 안 했을 때 보내기 전에 막아주는 알림을 들 수 있습니다. 이렇게 디자인을 하면 사용자의 실수를 막아줄 수 있다고 합니다. 또한, 이 알림을 언제 띄우고, 어떤 텍스트와 버튼 옵션을 줄지를 디자인에서 명시를 해야된다고 하네요. 다음은 로딩상태인데 '다음'버튼을 눌러 다른 페이지에 넘어갔을 때 빈화면이 아니라 로딩상태를 인지하게 끔 해줘야된다는 것인데요. 로딩 인디케이터, 진행률, 힌트 텍스트 등 뭔가 진행중이다를 알려주는 UX설계를 해야된다는 것입니다. 명시를 안해주면 사용자들이 이탈하게 되어 중요한 디자인이라고 합니다. 다음은 데이터가 하나도 없는 상태인데요. 처음 앱을 사용할 때 아무것도 없는 상태(콜드스크린)니 이떄 무엇을 먼저 하라고 안내할지 온보딩/힌트/CTA를 어떻게 둘지 설계를 해야된다고합니다. 툴팁 등을 배치하여 사용자에게 다음 방향으로 넘어갈 방법을 제시해야된다고 하네요. 다음은 버튼, 인풋, 아이콘의 상태 디자인인데 처음으로 디자인을 할 때 상태값을 고려안하고 버튼이 눌렸을 때의 디자인만 했었습니다. 하지만 default / hover / active / focus / disabled 등 각 상태를 명확히 만들어야 하고 상태값을 디자인을 안해두면 버튼이 눌린 것인지, 방금 눌린 것인지 사용자가 인지를 하기 어렵게 된다고하네요. 일곱번째는 비밀번호 재설정 플로우 인데요. 사용 빈도가 높고, 인증 코드, 백업 이메일 등 어떤 플로우를 택하든 안전하다고 느끼게 하는 UI로 단계뼐 안내를 디자인하여 포함시킨다고 합니다. 마지막으로 반응형 디자인 상태인데요. 제가 인턴경험을 할 때도 반응형 디자인에 대해서 잘 몰랐었고 브레이크 포인트에 대해서도 잘 몰랐습니다. 인턴에서 사수님께서 레이아웃이 어떻게 변하는지, 버튼 크기, 타이포그래피, 인터랙션 패턴이 어떻게 바뀌는지 최소한의 대표 상태를 정의해서 포함시켜야된다고 하시기도 했고 강의에서도 동일하게 말해주셔서 다시 한번 개념을 학습할 수 있어서 좋았습니다.

디자인 핸드오프는 항상 어려웠던 것 같습니다. 기본기가 다시 한번 중요하다는 것을 깨닫고 가는 강의였습니다. 학습을 통해 기본기를 확실히 다져 개발자와의 소통이 원할하게 되도록 노력해야 될 것 같습니다.

---

https://fastcampus.info/4oKQD6b

커리어 성장을 위한 최고의 실무교육 아카데미 | 패스트캠퍼스