layout: post
title: "Figma & Jenkins, 이거 모르고 쓰면 칼퇴는 남의 얘기! 실무 효율 200% 만드는 꿀팁 방출"
date: 2026-02-11
categories: AI-Tech
---
우리 개발자들이 늘 시간과의 싸움을 하잖아요? 빠르게 변화하는 IT 환경 속에서 새로운 기술 배우랴, 쏟아지는 업무 처리하랴, 정말 하루 24시간이 모자란 것 같아요. 그래서 저는 늘 '어떻게 하면 더 효율적으로 일할 수 있을까?' 이 고민을 놓지 않아요.
오늘은 실무에서 제가 직접 써보고 **'와, 이건 진짜 공유해야겠다!'** 싶었던 Figma랑 Jenkins 활용 꿀팁들을 좀 풀어볼까 해요. 괜히 최신 동향 따라간다고 복잡하게 다 설명하진 않을 거고, **'이것만 알아도 작업 속도가 확 올라간다' 싶은 핵심 노하우**만 쏙쏙 뽑아봤어요.
---
## 🚀 Figma: 디자이너랑 개발자, 이제 싸울 일 없어요!
Figma는 이제 선택이 아니라 필수가 됐죠. 특히 최근 업데이트된 기능들이 개발자 입장에서도 너무 편해져서 '진짜 일하기 좋게 바뀌었다'는 생각이 들어요.
### 1. **Figma Dev Mode & Variables: 디자인 핸드오프 시간 절반으로 줄이기**
예전엔 디자이너가 디자인 시스템 따로 관리하고, 개발자는 그거 보고 CSS 손으로 다 쳐야 했잖아요? 오타 나면 찾느라 시간 다 보내고, "이 간격이 16px이 맞아요?" 계속 물어보게 되고...
근데 **Figma Variables**랑 **Dev Mode**가 나오면서 이 간극이 확 줄었어요.
* **Variables (변수):** 마치 디자인 토큰처럼 색상, 폰트, 간격 등을 중앙에서 관리하게 해줘요. 디자이너가 변수 하나만 바꿔도 모든 컴포넌트에 자동 반영되는 거죠.
* **내 팁:** 실무에서 이거 써보니까, 디자인 시스템 업데이트되면 개발 쪽도 바로바로 반영되는 게 진짜 편하더라고요. 우리 쪽에서 변수만 잘 매핑해두면, 디자인 변경에 대한 유지보수 비용이 확 줄어들어요.
* **Dev Mode (개발 모드):** 개발자가 따로 플러그인 깔 필요 없이 CSS 스니펫이나 컴포넌트 속성들을 바로 확인할 수 있어서, 디자인 핸드오프 시간이 절반으로 줄어든 것 같아요.
* **이거 써보세요:** 그냥 디자인 파일에서 오른쪽 상단에 토글 버튼 하나만 누르면 돼요! 컴포넌트 클릭하면 **CSS/Swift/XML 코드**가 바로 보이고, 클릭 한 번으로 복사할 수 있어요. 디자이너한테 "이거 폰트 사이즈 몇이에요?" 물어볼 필요가 없어지는 거죠.
### 2. **Component Properties & Auto Layout: 컴포넌트 관리 난이도 확 낮추기**
복잡한 컴포넌트 관리, 골치 아팠잖아요? '버튼_기본', '버튼_활성화', '버튼_비활성화_아이콘_좌측' 이런 식으로 variants가 폭발적으로 늘어나서 파일 찾기 힘들고...
* **Component Properties:** 덕분에 variants 지옥에서 벗어났어요.
* **핵심:** 예를 들어, 버튼 하나에 '활성화/비활성화', '아이콘 유무', '크기' 같은 속성을 한 컴포넌트 안에서 다 제어할 수 있게 됐죠. 이거 잘 활용하면 파일 용량도 줄고, 컴포넌트 찾고 수정하는 시간도 확 단축돼요. 디자이너가 이걸 잘 만들어두면 개발할 때도 훨씬 직관적이에요.
* **Auto Layout:** 이건 워낙 기본이지만, 정말 기본 중의 기본이잖아요. 반응형 디자인 짤 때 이거만큼 편한 게 없는 것 같아요.
* **실무 활용:** 특히 컴포넌트 안에 텍스트 길이가 바뀌거나 아이템이 추가되어도 자동으로 레이아웃이 조절되게끔 디자이너한테 요청하세요. 개발할 때 일일이 패딩이나 마진 조절할 필요 없이 훨씬 수월해져요.
### 3. **생산성을 수직 상승시켜주는 Figma 플러그인 (개발자도 꼭 써봐요!)**
Figma는 플러그인 생태계가 엄청나잖아요? 개발자도 자주 쓰는 것 몇 가지만 알려드릴게요.
* **Content Reel:** 더미 텍스트나 이미지, 아이콘을 한 번에 채워 넣을 수 있어요.
* **팁:** 디자인에 들어갈 실제 데이터 형태를 미리 보여달라고 할 때 유용해요.
* **Unsplash:** 고품질의 무료 이미지를 바로 검색해서 넣을 수 있어요.
* **팁:** 디자인에 들어갈 이미지 placeholder 작업할 때 편하더라고요.
* **SPELL:** 오타 검사 플러그인.
* **팁:** 의외로 디자인에 들어간 텍스트에 오타가 많아요. 개발하기 전에 한 번 쓱 돌려보라고 디자이너에게 추천하면 좋아요.
* **AI Copilot (예시):** 최근엔 ChatGPT 같은 AI 연동 플러그인도 많이 나오더라고요. 텍스트 초안 작성이나 아이디어 구상에 도움을 받을 수 있어요.
* **팁:** 써보면 시간 아끼는 마법을 경험할 거예요.
---
## 🛠️ Jenkins: CI/CD? 이제 번거롭지 않아요!
CI/CD의 든든한 친구, Jenkins! 여전히 많은 회사에서 핵심 CI/CD 툴로 자리 잡고 있죠. 저는 Jenkins 쓸 때 다음 세 가지를 꼭 염두에 둬요. 이대로만 해도 훨씬 안정적이고 빠른 파이프라인을 만들 수 있어요.
### 1. **Declarative Pipeline & Shared Libraries: 파이프라인 관리, 이제 스마트하게!**
Jenkinsfile 직접 관리하는 게 예전엔 좀 번거롭고 실수도 많았잖아요? 스크립티드 파이프라인은 유연하긴 해도 너무 복잡해지기 쉽고요.
* **Declarative Pipeline (선언형 파이프라인):** 요즘은 무조건 **Declarative Pipeline**으로 가야 해요.
* **강력 추천:** YAML 기반이라 훨씬 읽기 쉽고, 스테이지별로 깔끔하게 정리돼서 빌드 과정을 한눈에 파악하기 좋더라고요. 에러가 나도 어느 스테이지에서 났는지 바로 보여서 디버깅도 편해지고요.
* **제 경험상:** 이거 도입하고 나서 파이프라인 수정하는 시간이 거의 절반으로 줄었어요. 개발팀원들이 Jenkinsfile에 직접 기여하기도 훨씬 쉬워지고요.
* **Shared Libraries (공유 라이브러리):** 그리고 자주 쓰는 스크립트나 로직은 **Shared Libraries**로 만들어서 재활용하는 게 국룰이에요.
* **DRY 원칙:** 한번 만들어두면 여러 프로젝트에서 불러다 쓰니까, 중복 작업 줄이고 표준화하기도 진짜 좋아요. `checkout`, `buildDockerImage`, `deployToK8s` 같은 함수들을 만들어두면, Jenkinsfile은 몇 줄로 엄청 간결해져요.
### 2. **Containerized Agents (Docker/Kubernetes): "내 로컬에선 되는데..."는 이제 그만!**
"내 로컬에선 되는데 왜 Jenkins에서 안 돼?" 이 말, 진짜 지겹도록 듣잖아요? 빌드 환경 때문에 골치 아팠던 적 다들 있을 거예요.
* **컨테이너화된 에이전트:** Jenkins 마스터 서버에 이것저것 설치하기보다, **Docker나 Kubernetes Agent를 활용해서 빌드 환경을 컨테이너화**하는 게 요즘 대세예요.
* **효율성 뿜뿜:** 각 파이프라인이 독립된 컨테이너 환경에서 실행되니까 충돌 걱정도 없고, 필요한 라이브러리 버전 관리도 훨씬 깔끔해지더라고요. 특정 빌드에 필요한 도구나 버전을 명확히 정의해서 사용할 수 있으니까, '환경 문제'로 인한 빌드 실패가 현저히 줄어요.
* **실제로 해보니:** 이거 도입하고 나서 '내 로컬에선 되는데 왜 서버에서 안 돼?' 하는 문제 진짜 많이 줄었어요. 빌드 시간도 안정적이고, 필요할 때마다 에이전트를 확장하는 것도 훨씬 유연해지고요.
### 3. **Blue Ocean: 파이프라인 시각화로 디버깅 시간 확 줄이기**
파이프라인 터졌을 때 어디서 에러 났는지 찾기 힘들 때 있죠? 로그만 줄줄이 보면서 눈 빠지게 찾고...
* **Blue Ocean 플러그인:** Jenkins에 **Blue Ocean** 플러그인 설치하면, 파이프라인의 각 스테이지 진행 상황을 시각적으로 확 보여줘요.
* **강력 추천:** 어디서 멈췄는지, 어떤 단계가 오래 걸리는지 한눈에 파악하기 좋아서 디버깅 시간이 엄청 단축되더라고요. 빨간색으로 에러 난 부분만 쏙쏙 보여주니까 놓칠 일도 없고요.
* **팁:** 특히 초보자들도 파이프라인 흐름 이해하기 진짜 좋아서, 팀원들 온보딩에도 도움이 많이 되더라고요.
---
## 마치며: 결국 중요한 건 '생산성'
오늘은 Figma와 Jenkins 최신 동향과 함께 실무에서 바로 써먹을 수 있는 효율화 팁들을 공유해봤어요. 결국 중요한 건 **'어떻게 하면 더 적은 노력으로 더 좋은 결과를 빠르게 낼 수 있을까?'** 이거잖아요.
새로운 툴이나 기능이 나왔을 때 무조건 따라가기보다는, **우리 팀의 상황과 가장 잘 맞는 방법을 찾아서 적극적으로 도입해보는 게 중요해요.** 오늘 공유한 팁들이 우리 개발자 동료들의 퇴근 시간을 조금이라도 앞당기는 데 도움이 됐으면 좋겠어요!
궁금한 점이나 추가하고 싶은 팁이 있다면 언제든지 댓글 남겨주세요! 같이 더 좋은 방법들을 찾아나가요!
Figma Jenkins 이거 모르고 쓰면 칼퇴는 남의 얘기 실무 효율 200 만드는 꿀팁 방출