안녕하세요?
약 4년만에 돌아온 프로덕트 디자이너 메리입니다.
여태까지 너무 게을러서 나중에.. 나중에 기술 블로그 써야지 하고 이번년도는 마음을 꽉 잡았읍니다..
진짜입니다.. 여러분의 독촉댓글 정말 많은 힘이 됐읍니다 .. 🔥 퐈이앾
자, 거두절미하고 이제는 미들(파들~)급 프로덕트 디자이너로 진화하게 되어
이제는 기획/디자인/Some of 프론트엔드 개발을 병행하고 있는데요.
개발자 분들과 소통할 때, 여러가지 용어를 알아야 할 것 같아 가끔 채찍피티와 독학을 하고 있습니다.
그래서,, 수도관 파이프는 알겠는데
CI/CD 파이프라인.. 그게먼데....!
💿 CI/CD 파이프라인을 알아보자. 콸콸콸~ ~~(like VJ특공대말투)
CI/CD는 지속적 통합(Continuous Integration)과 지속적 배포(Continuous Deployment)를 의미한다고 합니다. 쉽게 말해 개발자가 코드를 작성하고, 그 코드가 실제 사용자에게 빠르고 안정적으로 전달될 수 있도록 자동화된 프로세스라고 이해하시면 됩니다! (빠르게 변하는 애자일 개발 환경에서 CI/CD 구축은 필수)
[💁🏻♀️디자이너를 위한 간단설명]
조금 더 친숙한 예시로 설명하면, 피그마에서 우리가 디자인을 업데이트하면 실시간으로 팀원들이 볼 수 있듯이, CI/CD는 코드의 업데이트가 사용자들에게 즉시 전달될 수 있도록 하는 프로세스라고 이해하면 쉽습니다. (성격 급한 한국인들에겐 CI/CD 구축이 필수일듯)
🔗 지속적 통합(CI)이란?
지속적 통합이란 개발자가 작업한 코드의 변경 사항을 자주 통합(merge)하여, 문제가 없는지 미리미리 체크하고 테스트하는 과정이라고 합니다. 이런 과정들은 실제로 작은 문제들을 미리 잡아내어 나중에 큰 오류를 방지하는 데 아주 유용하다고 합니다.
[💁🏻♀️디자이너를 위한 간단설명]
CI는 마치 피그마에서 여러 디자이너들이 작업한 디자인을 자주 합치고 충돌을 미리 예방하는 과정과 비슷합니다. 여러명이서 UI 만들면 당연히 꼬이잖아여? 그래서 미리미리 정리하는 과정이라고 보시면 될 것 같습니다. (J이신 분들께는 최적일 듯 하네여..전 P라..)
📩 지속적 배포(CD)란?
지속적 배포는 통합한 코드가 테스트를 통과하면 자동으로 사용자들이 사용할 수 있도록 서비스 환경에 배포(deploy)하는 과정이라고 합니다. 이 과정 덕분에 우리가 디자인한 기능이 사용자들에게 더욱 빠르게 전달된답니다.
[💁🏻♀️디자이너를 위한 간단설명]
CD를 예시로 설명하기 좋은 디자인 툴은, Framer 인데요. CD는 우리가 Framer에서 디자인 끝내고 바로 Publish 버튼 눌러서 웹사이트가 즉시 배포되는 그 느낌입니다. 유쾌상쾌통쾌하죠.
코드를 짜고 나서 빠르고 자동으로 사용자들에게 전달하는 것이.. 바로 CD의 핵심입니다. (디자인 끝나고 퍼블리시 슥 눌러주는 그 시원함이랄까여 ㅋ)
🤷🏻♂️ 그래서 CI/CD 파이프라인 어케 설계하는건데
CI/CD 파이프라인의 단계는 다음과 같습니다.
1) 계획하기 (Plan)
프로젝트의 목표와 기능을 정의합니다.
2) 개발하기 (Develop)
개발자가 코드를 작성하고, 작은 단위로 자주 올립니다.
3) 빌드하기 (Build)
작성한 코드를 실행 가능한 형태로 변환합니다.
4) 테스트하기 (Test)
빌드된 코드가 문제없이 작동하는지 자동으로 점검합니다.
5) 배포하기 (Deploy)
테스트를 통과한 코드를 실제 서비스 환경에 배포합니다.
6)운영하기 (Operate)
배포 후에도 문제가 없는지 계속 모니터링합니다.
☑️ CI/CD 관련 툴은 무엇이 있을까?
대표적으로 사용되는 툴에는 Jenkins, GitLab CI/CD, GitHub Actions, Travis CI 등이 있습니다. 이 툴들을 활용하면 코드 작성부터 배포까지 모든 과정이 더욱 효율적으로 관리됩니다. (보니깐 GitHub Actions가 제일 많이 사용되는거 같네요!)
🤔 CI/CD 파이프라인이 왜 필요하냐면요..
CI/CD는 특히 앱이나 웹 서비스를 자주 업데이트하거나 빠른 시간 내에 새로운 기능을 추가하고자 할 때 꼭 필요합니다. 예를 들어, 자주 업데이트가 이루어지는 온라인 쇼핑몰, 모바일 앱이나 대규모 웹사이트에서는 CI/CD 파이프라인이 필수적이겠죵? (토스 디자이너분들이 Framer를 쓰는 이유가 아닐까 싶습니다. Just 추측~)
🤦🏻♂️ 마사카.. CI/CD를 구축하지 않으셨다고여..?
CI/CD 파이프라인을 구축하지 않을 경우, 다음과 같은 문제들이 발생할 수 있습니다:
1) 코드 변경 시 발생하는 오류를 즉각적으로 발견하기 어렵다. (OTL)
2) 배포 작업이 수동으로 이루어져 시간이 많이 걸리고 실수가 발생하기 쉽다. (삽질한 위험 UP)
3) 업데이트 주기가 길어져 사용자에게 빠르게 새로운 기능을 제공하지 못한다.(애자일 하지 않다..)
4) 팀원 간 협업이 어렵고, 작업 효율성이 떨어진다. (팀원 여러명이면 이제 걍 복장터짐)
👊🏻 디자이너가 CI/CD를 잘 안다면 좋은 이유
저희가 만드는 모든 디자인 시스템은, 이 CI/CD를 더 효율적으로 하기 위해 만들어졌다고 할 수도 있습니다.
요즘은 세상이 좋아져서(?) 피그마에서 디자인 시스템을 수정하면, 깃허브와 연동시켜 자동으로 빌드/배포가 되는 프로세스가 생겼는데요.
이렇게 CI/CD에 대한 개념을 잘 파악한다면 디자인 시스템을 다 뜯어고쳐도,
자동배포 되잖앙? 완전 럭키비키잖앙? 하는 상황을 만들 수 있습니다.
추가적으로, 추후에 프로덕트 디자이너가 PM으로 성장할 때 WBS를 짜거나,
QA를 진행할 때 훠어어얼씬 수월해집니다. 뭐 저도 그 과정인 것 같습니다만..^^
자자, 그럼 다음 시간에는
방금 말씀드린 피그마와 깃허브 연동시켜서 디자인 시스템 자동 배포해버리기. 편!
가져오겠습니다. (이건 좀 연구가 필요해서 다른 편 먼저 가져올 수도 있어여)
그럼 SAYONARA 씨유 레이러 🥃
