[Control Tower] Cursor와 Figma를 활용한 효율적인 UI/UX 프로토타이핑

[프로젝트 개요]

• 주제: 항공사 HR SaaS 서비스 구축
• 오늘의 목표: ERD 설계를 통한 DB 모델링 및 Figma를 이용한 UI/UX 구현

1. R&R (역할 분담) 팀원들과 효율적인 진행을 위해 역할을 나누어 작업을 진행했다.

• DB 모델링 (ERD Cloud): 유재현님, 전수환님 (조장)
• UI/UX 디자인 (Figma): 본인

2. AI(Cursor)를 활용한 UI/UX 프로토타이핑 과정 일반적인 'Figma → 퍼블리싱' 순서가 아니라, AI 에디터인 Cursor를 활용해 역순으로 디자인을 구체화하는 방식을 시도했다.

• 시안 도출: 어제 미리 Cursor를 이용해 2가지 버전(재현님 스타일, 원희님 스타일)의 디자인 코드를 생성해두었고, 팀 논의 결과 원희님 버전을 베이스로 채택했다.
• Figma로 가져오기 (워크플로우):
  1. Cursor와 AI를 이용해 필요한 화면의 HTML/CSS 코드를 생성.
  2. git-test 레포지토리를 생성하여 구현된 코드를 docs 폴더에 업로드.
  3. GitHub Pages 기능을 이용해 해당 코드를 웹페이지로 배포.
  4. Figma의 'html.to.design' 플러그인을 사용하여 배포된 실제 웹사이트 화면을 그대로 Figma 레이어로 변환.
• 협업: 구현하지 못한 세부 페이지들은 다른 팀원들도 각자 Cursor 등을 활용해 코드로 구현한 뒤, 테스트 레포지토리에 올려 Figma로 합치는 방식으로 진행했다. 이 방식 덕분에 빠르게 와이어프레임과 디자인을 확보할 수 있었다.

3. 트러블 슈팅: Git 브랜치 충돌 작업 도중 한 팀원이 dev 브랜치와 본인 작업 브랜치를 빈번하게 오가며 작업하다가 로컬 환경에서 충돌(Conflict)이 발생하는 이슈가 있었다.

• 원인: 작업 중인 파일이 커밋되지 않은 상태(Unstaged)에서 브랜치를 체크아웃(Checkout)하거나, 공용 브랜치(dev)의 최신 내용을 풀(Pull) 받지 않은 상태에서 머지하려다 꼬인 것으로 파악된다.
• 해결: 아직은 UI 연습 단계라 수동으로 해결하고 넘어갔지만, 본 프로젝트에서는 치명적일 수 있다.

4. 회고 (Next Step) AI 툴을 적극적으로 활용하니 디자인 시안을 잡는 속도가 획기적으로 빨라졌다. 다만, 본격적인 개발에 들어가면 Git 충돌은 생산성을 크게 떨어뜨릴 수 있다. 이를 방지하기 위해 Git Flow 전략을 명확히 하고, 브랜치 이동 시 git stash 활용을 생활화해야겠다.

---

Git 충돌 방지를 위한 계획

1. 브랜치 이동 전 '저장' 습관 (Git Stash):
   • 브랜치를 옮길 때 에러가 나는 가장 큰 이유는 **'하던 작업을 커밋하지 않고 이동해서'**입니다.
   • 이동 전 반드시 커밋을 하거나, 커밋하기 애매하다면 git stash 명령어로 임시 저장을 하고 이동하도록 규칙을 정하기.
2. Pull 먼저 하는 습관:
   • 작업을 시작하기 전, 그리고 내 코드를 올리기(Push) 전에는 무조건 dev 브랜치의 최신 내용을 내 로컬로 가져와서(Pull) 내 컴퓨터에서 충돌을 먼저 해결한 뒤 올리기
3. 작업 단위 쪼개기:
   • 너무 많은 파일을 한 번에 건드리면 충돌 확률이 높습니다. 기능 단위로 작게 쪼개서 자주 Merge(PR) 하는 것이 충돌을 줄이는 지름길입니다.