🟢 21. Cursor와 만든 팀 소개 페이지 👩‍💻

팀 소개 사이트 만들기, Show Your Time 제어 항목 추가 📝

안녕하세요, fi-workers 프로덕트 디자이너 나나산이에요. 이전에 말씀드렸던 프로덕트 러닝 클럽 Beta를 드디어 오픈했어요! 일요일에는 온라인 OT를 진행했고, 화요일부터는 10명의 멤버들과 함께 1일 1레퍼런스 분석 챌린지를 시작합니다.

완벽주의 성향이 강한 편이라 사전 신청만 받고 계속 시작하지 못하고 있었는데, 시작하고 나니 후련하네요! 여러분들에게도 꼭 해보고는 싶은데 차일피일 미루던 것들이 있나요? 궁금해요.

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

---

fi-workers 업무 일지

팀 소개 페이지 작업 👤

저번 뉴스레터를 통해 팀 소개 페이지를 작업하고 있다고 말씀 드렸는데요, 처음부터 완벽한 팀 소개 페이지를 만들려고 하면 또 한도 끝도 없을 것 같아서 간단한 블로그 스타일의 디자인으로 빠르게 개발을 해봤습니다.

🔗 https://fi-workers.com/team

직접 디자인하고 개발한 팀 소개 페이지

원래 실제 경력을 바탕으로 한 페이지를 만들려고 하다가 우선 저희의 소셜 플랫폼 계정에 공유할 용도로 부캐를 바탕으로 만들어봤어요. 저희 팀에 외주를 맡기고 싶거나 혹은 약간의 관심이 있는 분들에게 요청 시 경력 정보를 전달해 드리는 방향으로 해보려고 합니다.

이번에도 Cursor와 함께 개발을 진행해봤어요. 처음엔 Cursor에게 모든 것을 맡기는 형태로 개발을 했었다면 이번에는 제가 의도한 바가 반영될 수 있게 많은 이야기를 나누며 진행했습니다. 예를 들면 자주 쓰이는 요소들을 컴포넌트로 만들고, 이 페이지에서만 쓸 것 같아서 같은 페이지 안에 컴포넌트를 선언했죠.

이후 w0nder님께서 코드 리뷰도 해주셨어요. 제가 고민했던 것들에 대해 의견을 주시고 직접 수정해주셨어요. 코드 리뷰를 통해 하나의 파일에 하나의 컴포넌트만 와야 하는지 알게 되었어요. 네이밍은 너무 범용적이라고 생각은 하긴 했는데, 해당 페이지에서만 쓰니까 괜찮을 것 같다는 안일한 마음으로 네이밍했어요. 🥹

w0nder님의 코드 리뷰

Show Your Time > iOS 앱 제어 항목(Controls) 추가

Show Your Time 타임스탬프 카메라를 바로 실행할 수 있는 iOS 제어 항목을 추가하는 작업을 진행 중에 있어요. 사실 iPhone을 쓰는 저희 팀 모두에게 필요한 기능이라 사심을 갖고 시작했어요. 다른 위젯도 계획 중이지만, 상대적으로 간단해 보이는 제어 항목을 먼저 추가하게 되었어요.

하지만 개발 과정은 생각보다 쉽지 않았어요. Apple 개발자 센터 설정부터 Control Widget 구현, React Native 빌드 이슈까지 여러 도전과제들과 마주쳤죠. 특히 최신 기술이다 보니 문서화된 자료나 AI의 도움을 받기가 어려웠는데요, YouTube 튜토리얼을 보면서 실시간으로 따라하며 하나씩 해결해 나갔어요.

특히나 딥링크 구현은 까다로웠어요. Control Widget에서 앱을 실행할 때 카메라 화면으로 바로 이동하도록 하는 게 목표였는데, 앱이 백그라운드에 있을 땐 잘 되다가 완전히 종료된 상태에서는 딥링크가 제대로 동작하지 않았거든요. React Native와 네이티브 코드 사이의 통신 문제였는데, 라이브러리 코드를 수정하고 patch-package를 적용해서 해결할 수 있었어요.

쉽게 되리라 생각한 SVG 아이콘 추가도 만만치 않았는데요, SF symbol로 변환하는 과정이 필요했어요. 다행히 SF Symbols Optimizer라는 피그마 플러그인과 Create Custom Symbols라는 macOS 앱의 도움을 받아 변환 작업을 수월하게 진행할 수 있었습니다.

iOS 제어 항목 시안. 오른쪽 아이콘과 버튼명으로 확정했습니다.

---

---

지속 가능한 사이드 프로젝트를 위한 클럽, 사이드킥

지속되는 사이드 프로젝트를 만들고 싶으시다면 사이드킥 사전 신청 링크를 통해 지금 바로 신청해보세요. 궁금하신 점이 있다면 뉴스레터의 댓글이나 사이드킥 오픈채팅방에 와서 남겨주세요. 😉

---

이번주 fi-workers가 본 제품

Apple 초대

🔗 https://apps.apple.com/kr/app/apple-invites/id6472498645?l=en-GB

Apple에서 초대라는 재밌는 앱을 내놨어요. 이벤트를 생성하고 초대장을 만들 수 있는 앱이에요. 써보고 느낀 점은 Luma라는 제품을 떠오르게 만든다는 거였어요. 나중에 SaaS를 만든다면 꼭 참고하고 싶은 제품이 저에게는 바로 Luma거든요. 컬러풀한 다양한 테마를 멋지게 지원하는데, Apple 초대 앱도 비슷한 느낌이 들었어요. Luma는 공적인 이벤트에 적합하고, Apple 초대는 일상적인 이벤트에 적합한 것 같아요. Apple이 갑자기 이런 앱을 만든 이유가 궁금해지네요. 👀

Apple 초대 앱

Luma

Bento

🔗 https://bento.me/

아름다운 Bio를 꾸밀 수 있는 제품 Bento입니다. Bento는 2023년 6월 Linktree에 인수되었으나 팀에 합류하여 계속해서 Bento를 만든다고 블로그에는 적혀 있습니다. 하지만 예전에 썼을 때보단 거의 그대로인 상태고, Changelog를 봐도 2023년 5월 릴리즈에 멈춰져 있어서 계속 만들고 있는지는 잘 모르겠습니다. 그래도 Linktree보다 좋아했던 제품이라 한 번 공유해봅니다. 제 바이오에도 놀러 와보세요. 🍀

---

---

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

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

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