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

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

---

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

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

 

 

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

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

 

 오늘은 정말 중요한 부분이죠. 디자인시스템에 대해서 공부했습니다. 디자인시스템은 그림자, 아이콘, 컴포넌트 등으로 만든다고 합니다. 또한 디자인 원칙, 스타일 가이드, UI, 컴포넌트 등 이를 사용하는 규칙을 통합한 포괄적인 라이브러리 입니다. 지속적으로 업데이트를 해줘야하며 왜 필요한지를 이해해야된다고 합니다. 저도 인턴 근무 당시 참여한 프로젝트가 이미 출시는 되어있었지만 디자인시스템이 없어서 따로 다시 만들었던 기억이 납니다. 저는 컬러, 텍스트. 상태값에 다른 버튼 등만 디자인시스템으로 넣어두긴했지만 실제 실무에서는 더욱 더 많은 내용들과 온보딩비용 절감, 일관성 있는 디자인 등을 위해서 중요하다고 합니다. 

 

디자인시스템을 만들면서 체크해야 될 부분들이 있는데요. 브랜드 컬러, 그레이 스케일, 시스템 컬러, 투명도 등이 있다고합니다. 그리고 폰트 종류도 3가지가 넘어가는지 스타일은 같은 위계인데 크기나 굵기가 제각각인지, 가독성을 위한 줄 간격 규칙이 존재하는 지 확인해야 된다고 합니다. 또한, 페이지마다 마진과 컬럼 값이 일치하는지, 요소 사이의 간격이 4px,8px배수 없이 임의로 설정되어있는지, 아이콘은 라인 굵기, 스타일 크기가 일관적인지 등 체크해야될 부분이 굉장히 많네요. 이외에도 체크해야될 부분이 많은데 너무 방대해서 제가 주로 체크했던 점들위주로 작성했습니다. 

 

컴포넌트 부분은 디자인 시스템에서 빠질 수 없는 부분인데요. 컴포넌트를 구축할 때 아토믹 디자인 방법론을 활용한다고합니다. 아토믹디자인도 많이 들어보셨을 거 같은데 화학점 개념을 인터페이스 디자인에 대입하여 가장 작은 단위부터 큰 단위로 시스템을 구축하는 방식입니다. 원자를 구축할때디자인 토큰을 연결하고 상태값들을 정의하며 명도대비(접근성) 그리고 터치영역을 확보한다고 합니다. 디자인 토큰이 최근들어 많이 사용되어지는거같은데 처음 프로젝트를 들어갔을 때 개발자에게 디자인 시안을 전달할 때 토큰을 지정안하고 드렸었더니 소통에 시간이 많이들었어서 이제는 꼭 토큰을 지정해주고있습니다. 분자 구축 단계에선 오토레이아웃, 패딩 간격 등을 고려한다고 합니다. 유기체 단계에선 반응형 대응을 해주고 데이터 치환이 용이한지, 컨테이너 즉 Max-width와 배경색이 정의되어있는지 확인한다고 합니다. 그 이후 디자이너가 쓰는 컴포넌트 이름과 개발자가 쓰는 코드의 이름이 같게 네이밍컨벤션을 일치시켜줘야 된다고합니다. 이 네이밍부분도 정말 헷갈리고 KRDS라는 사이트에서 자세하게 나와있었는데 이번 기회에 네이밍을 붙이는 연습도 해야될 것 같습니다. 매번 Rectangle, frame123 이런식으로 되어있는 네이밍이 잇었어서 개발자분들에게 좀 미안했습니다.

 

마지막으로 CSS STATS라는 사이트를 통해 해당 랜딩페이지에서 사용한 컬러, 폰트, 컴포넌트 등 디자인시스템을 나타내주는데 굉장히 유용해 보여서 제가 인상깊게 본 페이지를 넣어봐 분석해보는 시간을 따로 가져봐야될 것 같습니다. 분석하는 것 만큼 실력이 빠르게 상승하는 건 없다고 생각해서 실행에 옮겨봐야겠네요.

---

https://fastcampus.info/4oKQD6b

💙 2026 패캠구독제 LAST SALE : UP TO 98% 💙 | 패스트캠퍼스