🟢 26. 린트 에러부터 랜딩 페이지까지

프로덕트 디자이너가 코드를 만났을 때 생기는 일

Mar 20, 2025

안녕하세요, fi-workers 프로덕트 디자이너 나나산이에요. 저는 오랜만에 사이드킥 주간 미팅 외에는 약속이 없는 평화로운 주말을 보냈어요. 미드 <굿 플레이스>를 보고, 굿 플레이스를 만든 마이클 슈어가 쓴 <더 좋은 삶을 위한 철학> 책을 읽고 만년필로 필사를 했어요. 간만에 SNS를 멀리한 주말이었어요.

오늘 뉴스레터도 재밌게 읽어주시길 바라요. 저희에게는 댓글이 가장 힘이 된답니다. 😉
26번째 뉴스레터 시작해볼게요! 📩

Show Your Time 앱 내 광고주를 모십니다 🍀

Show Your Time 앱에서 생산성과 자기계발에 관심이 크고, 구매력이 높은 iOS 사용자들에게 광고하고 싶으시다면, 아래 링크로 광고 상품에 대해 살펴보세요. 😉

🔗 https://tally.so/r/w27BzL

fi-workers 업무 일지 ✍️

체커블(Checkable)

프로덕트 디자이너의 개발 여정

지난 뉴스레터에서 지난 뉴스레터에서 말씀드린 대로, UI 디자인 단계를 생략하고 와이어프레임을 기준으로 퍼블리싱 작업을 진행 중입니다. 외주 작업을 하며 퍼블리싱에 참여한 적은 있지만 본격적으로 모든 페이지를 작업해보는 건 처음이라 진행하면서 시행착오를 겪으며 배워 나가고 있습니다.

비개발자로서 작업하면서 제일 시간이 많이 들었던 일은 린트 에러를 수정하는 일이었어요. 코드가 조금만 어그러지면 무수히 생겨나는 수많은 빨간 줄들을 보는 게 무서웠어요. 하지만 이런 문제에 대해 이야기를 하지 않던 터라, 이런 린트 에러를 손쉽게 고쳐주는 프리티어(Prettier) 같은 익스텐션이 있는지 조차 몰랐어요. 개발 초보이기 때문에 작은 문제라도 개발자인 w0nder님께 공유해야겠다는 교훈을 얻었습니다.

w0nder님께 Shadcn의 컴포넌트 자체를 많이 수정하게 되면 버전 업이 될 때 문제가 될 수도 있다는 리뷰를 듣기도 했어요. 근데 조금씩 고쳐야 할 일들이 생기더라고요. 예를 들면 기본적으로 선택하는 요소인데 cursor: pointer 같은 속성이 빠져 있어 추가해야 했고, Input과 Select는 생김새는 비슷하나 Shadow가 살짝 달라 맞추는 작업이 필요했어요. 당장은 Shadcn 컴포넌트 자체를 많이 수정하진 않아 괜찮지만 추후에는 직접 컴포넌트를 만들어야 할 때의 기준 적립도 필요하겠다 싶었습니다.

이번에 루시드(Lucide) 아이콘 라이브러리도 개발할 때 처음 써봤는데 좋았습니다. 아이콘을 만드는데 재주가 없는 디자이너라 아이콘 svg가 필요할 때 Lucide를 써보긴 했지만, 개발할 때 바로 불러와서 쓰는 건 처음이었어요. path가 살아 있어서 stroke width도 수정할 수 있는 것도 신기해요. 지금까지 통째로 svg 코드만 넣어서 사용해오던 저에게는 신세계처럼 느껴진답니다.

랜딩 페이지 작업

체커블 배포 시 체커블을 소개할 수 있는 간단한 랜딩 페이지 작업도 진행 중입니다. 이번 작업도 기존의 랜딩 페이지 작업 과정과 좀 다르게 진행을 해보고 있어요.

우선 Claude에게 체커블이 어떤 문제를 해결하고 어떤 해결책을 제공하는지 자세히 적어서 인풋으로 제공하고, 이를 바탕으로 랜딩 페이지 기획서를 뽑아달라고 했습니다. 여기까지는 기존의 과정과 비슷한데요, 이후 AI 랜딩 페이지 빌더 롤아웃 AI(Rollout AI)로 랜딩 페이지 생성해봤습니다.

세세한 GUI 디자인은 마음에 들지 않았지만, 전체적인 구성이나 메시지는 마음에 들었어요. 그래서 이 가안을 기반으로 랜딩 페이지를 새로 작업해야겠다 싶었습니다. 롤아웃 AI는 미리보기 링크를 공유할 수 있어요. 이 URL을 가지고 html.to.design이라는 Figma 플러그인으로 Figma 요소로 구성된 프레임을 추출했어요.

롤아웃 AI의 가안을 수정하면서 아래와 같은 체커블 랜딩 페이지 작업을 진행하고 있습니다. 롤아웃 AI는 정말 긴 랜딩 페이지를 제안해줬는데요, 체커블은 MVP인만큼 적절하게 랜딩 페이지를 구성해보려고 합니다.

체커블 개발 현황

체커블은 3월 말 배포를 목표로 달리던 중이었는데요, 서드 파티 앱(3rd Party App), 그 중에서도 디스코드봇을 메인으로 제품화를 하는 건 처음이라 여러 문제들을 겪고 있어요.

예를 들면 유저와 봇의 권한이 달라요. 그래서 봇은 유저가 접근 가능한 서버 목록을 알 수가 없어요. 그러다 보니 유저가 디스코드 내에서 본인의 계정을 연동하고, 어떤 서버에 봇을 추가할지 선택하더라도 그 정보를 받아올 수 없습니다. 그래서 체커블로 리다이렉트된 이후 내부에서 한 번 더 서버를 선택해줘야 해요. 사용자 입장에서는 같은 일을 두 번 하게 되기도 하고, 휴먼 에러가 발생할 수 있는 부분이라 UI에서 명확한 안내가 필요해요.

원래는 MVP 버전이라 글로벌한 서버 연동 설정 없이, 챌린지마다 디스코드 서버를 연동하려고 했습니다. 하지만 이 계획을 수정해서 슬랙의 워크스페이스와 유사한 개념을 추가할지 검토 중입니다. 검토에 따라 스펙이 늘어나 작업 기간이 더 길어지게 될 것 같습니다. 🤣

인디라운드에서 나눈 이야기

인디 메이커를 위한 커뮤니티, 인디라운드 디스코드 채널에서 공유된 아티클을 공유합니다 😊

이외에도 지속가능한 사이드 프로젝트를 도와주는 사이드킥, 매월 열리는 오프라인 북클럽, 독서 챌린지 등에 참여할 수 있어요 😊 인디라운드 디스코드 채널로 놀러 오세요!

이번주 fi-workers가 본 제품, 아티클

커맨드K(⌘K)

🔗 https://cmdk.paco.me/

w0nder님이 공유해주신 커맨드 라이브러리입니다. Shadcn도 커맨드 컴포넌트를 제공하긴 하지만 커맨드K(⌘K)는 레이캐스트(Raycast), 리니어(Linear), 버셀(Vercel), 프레이머(Framer)의 커맨드 컴포넌트를 쓸 수 있다는 게 매력적입니다.

저는 레이캐스트와 리니어를 많이 쓰는데요, 예전에 SaaS 제품의 커맨드 기능을 만들 때 레이캐스트를 많이 참고했었어요. 나중에 체커블에도 커맨드 기능이 들어가는 때가 온다면 그때 고려해보고 싶은 라이브러리입니다. 😊

롤아웃 AI(Rollout AI)

🔗 https://rollout.site/

위에서도 언급했던, 체커블 랜딩 페이지를 만들 때 사용했던 랜딩 페이지를 생성해 주는 롤아웃 AI(Rollout AI)입니다. 이 제품을 찾게 된 이유는 Claude보다 좀 더 랜딩 페이지에 최적화된 AI 제품을 찾아서 빠르게 초안을 만들어 보고 싶다는 생각에서였어요. 그러다가 찾게 된 제품인데 전체적인 구조는 Replit과 많이 닮은 것 같아요. 생각보다 초안의 결과물이 마음에 들어서 종종 사용해보게 될 것 같습니다.

JOH 조수용 1 : 감각은 타고나는 것이 아니다, 본질과 상식에서 태어나는 것이다

🔗 https://www.longblack.co/note/1254?ticket=NT25122e946536d5f9bbecc905e2d488e42900

롱블랙 한달 이용권이 생겨서 사용해보던 중에 JOH의 조수용 대표의 인터뷰를 보게 되었어요. 이전에 유튜브 채널 최성운의 사고실험에서 재밌게 인터뷰를 봤던 터라 롱블랙의 인터뷰도 읽어보게 되었어요.

흥미롭게 읽은 부분은 디자이너 스스로가 자신의 역할을 ‘제품을 아름답게 만드는 사람’이라고 생각하는 디자이너는 배너를 싫어하겠지만 자신을 ‘사업을 성공시키는 디자이너’라고 생각한다면 배너를 넣는 결정을 했을 거라는 이야기였어요.

예전에 저는 배너를 싫어하는 디자이너는 아니었지만 배너 같은 마케팅용 프로모션 디자인은 제 일이 아니라고 생각하던 때가 있었어요. 인원이 어느정도 있는 회사였기 때문에 프로모션 디자인 팀이 따로 있었거든요. 하지만 지금은 그때와 생각이 많이 다릅니다. 그래서 조수용 대표의 글을 고개를 끄덕이며 읽을 수 있던 것 같아요.

fi-workers 뉴스레터를 읽어주셔서 정말 감사해요. 재밌게 읽으셨나요? 그렇다면 주변에 공유해 주세요 🍀

이번주 뉴스레터와 저희가 본 제품과 아티클도 재밌게 읽으셨나요? 😉
네, 오늘 뉴스레터에 대해 드릴 의견, 감상이 있어요!

💬 코멘트로 남겨주시는 의견도 저희에게 정말 정말 큰 힘이 됩니다. ❤️

그럼 저희는 다음 주 금요일에 만나요! 👋
나나산 드림

fi-workers 뉴스레터