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

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

---

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

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

1

2

3

4

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

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

 

 오늘은 반응형 디자인과 주석에 대해서 배웠습니다. UIUX디자인과 프로덕트 디자인 준비를 하는 사람이라면 정말 많이 들어봤을 반응형 디자인인데요. 반응형 디자인은 전 세계 웹 트래픽이 55%이상 모바일 기기에서 발생하고 모바일, 태블릿, 데스크톱 모두에서 최적의 사용자 경험을 제공하기 위해서 하는 거라고 합니다. 즉 기기 전환 할 때 모바일의 화면이 데스크톱에도 그대로 나오면 좀 어색한 부분이 있어 동일한 사용자 경험과 브랜드 일관성을 보장하기 위해 하는 디자인을 반응형 디자인이라고 합니다. 그리고 이 반응형 디자인을 하게 되면 한번의 작업으로도 구축과 유지관리 리소스를 절약할 수 있어 많이 활용하고 있다고 합니다.

 

제가 미래내일 일경험 인턴 근무 당시 반응형 디자인에 대해서 자세히 알지 못해서 고생했던 경험이 있었는데요. 그때 당시 그리드에 대해서도 잘 몰랐었습니다. 이 그리드를 통해 각 기기마다 일관된 디자인을 할 수 있었습니다. 주로 데스크톱 12, 태블릿 8, 모바일 4~6 컬럼을 많이 활용한다고 합니다. 또한, 개념 중 마진, 거터, 컨테이너 등이 있는데 마진은 그리드 양쪽 끝과 화면 사이의 간격이고 거터는 컬럼 사이사이 간격입니다. 컨테이너는 컬럼들 전체를 포함하는거라고 아시면 됩니다. 

 

앞에서 이야기한 내용을 바탕으로 반응형 디자인에서 중요한건 유동적 콘텐츠가 있습니다. 컨테이너에 맞게 콘텐츠 크기와 비율이 조정된느걸 말하고 브라우저의 가로 길이가 브레이크 포인트에 도달하면 현재 크기에 맞게 확대 및 축소 되는 걸 말합니다. 또한, 아이콘과 일러스트레이션은 SVG로 export를 해야되는데 그 이유는 크기나 비율이 확대 되었을 때 픽셀이 깨지지 않고 그대로 유지되기 떄문이라고 하네요. 

 

브레이크포인트의 개념도 배웠는데 애플 홈페이지를 기준으로 화면을 늘렸다 주렸다 하면 레이아웃이 변하잖아요. 그게 특정 px값이상일 때 이 레이아웃을 사용하겠다 라는 개념입니다. 즉 정리하자면 화면 크기에 따라 레이아웃이 변하는 기준 값이라고 생각하면됩니다. 주로 모바일은 0~479로 지정한다고하는데 480이 되면 레이아웃이 바뀐다고 이해하시면 됩니다. 태블릿은 480~767은 똑같은 레이아웃을 유지하는데 768이되면 레이아웃이 변경된다고 보시면됩니다. 가장 상용화된 브레이크포인트 범위는 320~767 / 768~1023 / 1024 이상으로 지정한다고 하네요.

 

주석은 간략하게 본인이 디자인한 화면에 대한 특징을 명확하게 설명하는 것 이라고 생각하면 됩니다. 이 제품이 어떻게 이동하는지, 인터랙션은 어떻게되는지, 이 버튼을 클릭했을 때 팝업이 열린다는 지, 기능이 어떻게 작동하는지, '거래 내역 보기'를 탭하면 지난 30일 활동 표지 페이지가 열린다, 필터 선택 시 별도 버튼 클릭 없이 제품 목록이 즉시 업데이트 된다 등 여러 유형이 있지만 자세하게 설명을 하는 것이라고 생각하면 될 것 같습니다.

 

그냥 화면 디자인만 해놓고 개발자에게 전달하는 거랑 본인이 디자인한 화면에 꼼꼼히 설명을 더해서 전달하는거랑 공수 차이가 심하다고 생각해요. 저도 이러한 개념에 대해 몰랐을 때 디자인된 화면만 개발자에게 넘겼어서 소통을 엄청 많이 했던 기억이 나네요. 제가 디자인한 화면에 의도를 알아주길 바랬던거 같아요. 지금 생각해보면 정말 잘못된 방법이었고 이 방법을 안 뒤에는 주석을 달아 제가 디자인한 화면에 대해 상세하게 설명을 적어두고 있습니다. 반응형 디자인과 주석 그리고 브레이크 포인트 등 실무에서 가장 중요시 여기는 파트에 대해서 배웠는데 실무에 들어가기 전 기본기를 확실히 다져놓고 가겠습니다.

---

https://fastcampus.info/4oKQD6b

올해 마지막 보너스 혜택! 1+1+1 쿠폰 이벤트 (~12/09 23:59) | 패스트캠퍼스