00:00:00이것은 Figma와 경쟁하는 오픈 소스 디자인 도구인 Penpot입니다.
00:00:05처음 보면 Figma처럼 보이지만, 작동 방식은 전혀 다릅니다.
00:00:10왜냐하면 내부적으로 실제 CSS를 사용하기 때문인데, 나중에 변환할 필요가 없습니다.
00:00:15그리고 그것이 핸드오프 문제를 크게 바꿔놓죠.
00:00:18무슨 뜻인지 보여드릴게요.
00:00:20Penpot은 브라우저 기반의 UI 디자인 및 프로토타이핑 도구입니다.
00:00:29겉보기에는 Figma나 Sketch처럼 들릴 겁니다.
00:00:32하지만 실제로는 여기가 가장 큰 차이점입니다.
00:00:35Penpot은 100% 오픈 소스이며 실제 웹 표준을 기반으로 구축되었습니다.
00:00:40SVG, CSS Flexbox, Grid, 그리고 HTML이죠.
00:00:43따라서 나중에 디코딩하고 구조를 해체해야 하는 도구에서 디자인하는 대신,
00:00:49웹이 실제로 작동하는 방식에 더 가깝게 작업하는 것입니다.
00:00:52Docker 명령 한 줄로 직접 호스팅할 수 있는데,
00:00:54제가 이 영상에서 그렇게 할 예정입니다. 저는 그런 걸 좋아하거든요.
00:00:58도구들의 오픈 소스 버전과 그것들이 어떻게 비교되는지 확인하는 것이죠.
00:01:01이제 Penpot에서 디자이너들은 여전히 컴포넌트, 레이아웃, 프로토타입을 얻습니다.
00:01:06하지만 개발자들은 정말 중요한 것, 즉 실제 코드처럼 보이는 결과물을 얻게 되죠.
00:01:11이상한 중간 계층도 없고, 무슨 일이 일어나는지 추측할 필요도 없습니다.
00:01:14게다가 무료입니다.
00:01:15무제한 파일, 무제한 공동 작업자, 사람들이 이 도구에 관심을 갖는 이유죠.
00:01:20오픈 소스 도구와 작업 효율을 높여주는 코딩 팁을 좋아하신다면,
00:01:23채널을 구독해주세요.
00:01:25영상이 계속 올라올 예정입니다.
00:01:27이제 Penpot은 디자인 도구입니다.
00:01:28그럼 왜, 특히 개발자라면 관심을 가져야 할까요?
00:01:31이 도구가 매우 구체적인 고통을 해결해주기 때문입니다.
00:01:34프로젝트를 핸드오프하거나 디자인을 실제 코드로 변환하는 고통 말이죠.
00:01:39Penpot은 디자인을 웹에서 네이티브하게 느끼게 해줍니다.
00:01:42따라서 무언가를 검사할 때 추측하는 것이 아니라 읽어내는 것입니다.
00:01:46보여드릴게요.
00:01:48좋습니다, 짧은 데모 시간입니다.
00:01:50이것은 제 자체 호스팅 Penpot 인스턴스에서 실시간으로 실행 중입니다.
00:01:54공식 Docker Compose 파일을 사용하여
00:01:58방금 구성한 대로 단일 Docker Compose up 명령으로 실행했습니다.
00:02:00정말 대단했죠.
00:02:02실행하는 데 시간이 좀 걸렸지만, 일단 작동하기 시작하니 아주 좋습니다.
00:02:07좋은 랜딩 페이지가 있고, 여기서 새 프로젝트를 만들 수 있는 깔끔한 모습입니다.
00:02:12이제 실제로 무언가를 만들어 봅시다. 간단한 카드 하나, 거창한 건 아니고요.
00:02:16컨테이너를 하나 만들고, flexbox로 설정하고, 패딩을 좀 추가합니다.
00:02:21제목, 텍스트, 버튼을 넣어볼게요.
00:02:24여기에 카드를 하나 더 복사해서 붙여넣어 볼 수도 있습니다.
00:02:28빠르게 편집을 좀 해보죠.
00:02:30이제 검사(Inspect) 모드로 전환합니다.
00:02:32이 부분이 중요합니다.
00:02:33실제 CSS, flexbox 속성, 간격, 레이아웃의 깔끔한 구조를 얻을 수 있습니다.
00:02:39대충 만든 변환이 아니라, 여러분이 이미 이해하고 있는 방식이죠.
00:02:42이걸 복사해서 바로 프로젝트에 넣을 수 있습니다.
00:02:46또한 변형(Variants), 토큰, 프로토타입 흐름, SVG 내보내기 기능도 있습니다.
00:02:51그게 여기서 중요한 점이죠.
00:02:52이것은 개발팀의 마찰을 크게 줄여줍니다.
00:02:54특히 전체 스택을 직접 소유하고 있는 경우에는 더더욱 그렇고요.
00:02:58이제 대부분의 개발자가 회의적으로 생각하는 부분에 대해 이야기해 봅시다.
00:03:02처음엔 '멋지네, 또 다른 디자인 도구군'이라고 생각할 수 있습니다.
00:03:06하지만 차이점은 보이는 모습이 아니라 작동 방식에 있습니다.
00:03:09Figma는 레이아웃을 시뮬레이션합니다.
00:03:12오토 레이아웃은 flexbox에서 영감을 받았지만, 여러분은 여전히 머릿속으로
00:03:16모든 것을 변환해야 하죠.
00:03:17Penpot은 실제 CSS에 훨씬 가깝게 시작하므로
00:03:21디자인과 코드 사이의 정신적 변환 과정이 줄어듭니다.
00:03:25그리고 Lock-in 문제도 있죠, 맞죠?
00:03:26Figma는 독점 파일을 사용합니다.
00:03:29가격 책정 및 라이선스 모델도 있고요.
00:03:31반면 Penpot은 오픈 소스라서 직접 호스팅할 수 있습니다.
00:03:34데이터가 SVG, CSS, JSON으로 유지됩니다.
00:03:38핸드오프도 다른데, 왜냐하면 Figma에서는 추가 레이어처럼 느껴지거든요, 그렇죠?
00:03:42Dev 모드, 플러그인, 추가 단계들까지요.
00:03:45하지만 Penpot에서는 바로 내장되어 있습니다.
00:03:47검사 뷰는 우리가 실제로 필요로 하는 것에 이미 더 가깝습니다.
00:03:50솔직히 말해서 Figma는 훌륭합니다.
00:03:53저도 사용하고 있고, 규모도 크며, 잘 다듬어진 생태계죠.
00:03:56하지만 Penpot은 처음부터 확실히 개발자를 염두에 두고 만들어졌습니다.
00:04:00그럼 개발자들이 실제로 이 도구에서 좋아하는 점은 무엇일까요?
00:04:02음, 제가 계속 말했듯이 가장 큰 건 그거죠.
00:04:04간단히 말해, 핸드오프 문제가 작아진다는 것입니다.
00:04:07우리에게는 정말 큰 일이죠.
00:04:08더 이상 레이아웃을 역설계할 필요가 없습니다.
00:04:11CSS와 직접적으로 연결되는 내용을 읽는 것이니까요.
00:04:15그건 디자인 토큰에도 나타납니다.
00:04:18색상, 간격, 타이포그래피가 여러분이 코딩할 때 생각하는 방식과
00:04:22가까운 방식으로 구조화되어 있습니다.
00:04:24그리고 자체 호스팅은 일부 팀에게는 큰 장점입니다.
00:04:27개인 정보 보호, 내부 도구, CI/CD 등에 신경을 쓴다면 이 모든 게 중요하죠, 그렇죠?
00:04:33하지만 오픈 소스라고 해서 완벽한 건 아닙니다. 어떤 도구도 완벽하진 않죠, Figma조차도요, 맞죠?
00:04:37하지만 Penpot은 정말 큰 파일을 다룰 때는 어려움을 겪을 수 있습니다.
00:04:40플러그인 생태계도 훨씬 작고요.
00:04:43Figma에 깊이 익숙해져 있다면 학습 곡선이 어느 정도 있겠지만,
00:04:47사실 생각하는 방식이 다를 뿐이라 익히기는 매우 쉽습니다.
00:04:51그러니까 좀 덜 다듬어진 부분은 있지만, 디자인과 개발 사이의 간극이 훨씬 작다는 것,
00:04:56솔직히 그게 우리 중 많은 사람이 바라는 것이죠.
00:04:59자, 그럼 사용할 가치가 있을까요?
00:05:01저는 그렇다고 생각합니다.
00:05:02정말 재미있었습니다.
00:05:02저는 이런 도구들을 좋아하거든요.
00:05:03그러니 많은 개발자분들에게도 충분히 괜찮습니다.
00:05:06사이드 프로젝트를 하거나 개발 비중이 높은 일을 한다면 충분히 합리적이죠,
00:05:10특히 비용 절감을 생각하신다면 말이죠, 그렇죠?
00:05:12MVP를 만들거나 지금 보시는 것처럼 무언가를 구축할 때,
00:05:14Lock-in을 피하고 싶고,
00:05:16디자인을 깔끔하게 코드로 변환하고 싶을 때 말입니다.
00:05:19대규모 디자인 시스템을 갖춘 대기업에 있다면,
00:05:23이미 Figma를 중심으로 구축되어 있을 겁니다.
00:05:24그러니 하루아침에 이걸로 바꾸지는 않겠지만,
00:05:28그게 핵심은 아닙니다.
00:05:29Penpot이 모든 것을 대체해야만 유용한 건 아니니까요.
00:05:31많은 팀과 많은 분들에게, 이 도구는 필요한 대부분의 것을 커버하고,
00:05:35개발 속도를 높여줍니다.
00:05:36그게 더 많은 개발자가 이 도구를 직접 사용해보기 시작한 이유죠.
00:05:39디자인을 코드로 옮기는 데 걸리는 모든 핸드오프 시간을 줄여주니까요.
00:05:45시도해보고 싶다면 아주 쉽습니다.
00:05:46Penpot 앱에 접속해서 클라우드 버전을 사용하거나, 제가 하는 것처럼 해보세요.
00:05:50원한다면 직접 Docker로 호스팅해서 더 많은 통제권을 가져보는 거죠.
00:05:54이런 오픈 소스 도구와 코딩 팁이 즐거우셨다면,
00:05:57Better Stack 채널을 구독해주세요.
00:05:59다음 영상에서 뵙겠습니다.