프론트엔드 개발자라서 다행이야

연휴를 맞아 바이브 코딩 강의를 촬영하다가 살짝 진땀나면서도 재밌었던 순간이 있었어요. 강의 랜딩 페이지를 띄워놓고 '이 강의의 활용법' 클립을 찍는데 신경쓰이는 오타가 있더라고요. 파트 3 "Supabase로 데이터 관리 및 서비스 스케일업"이라는 챕터에 파트 1의 챕터명이 들어있었습니다.

텍스트였다면 크롬 개발자 도구로 바로 수정했겠지만 이미지였어요. 그냥 촬영 강행하고 나중에 수정할까 고민하다가, 해결에 딱 10분만 써보기로 했습니다.

1. 공유받은 랜딩 페이지 피그마 파일에서 해당 컴포넌트를 찾음

2. 읽기 전용이라 바로 수정 불가. svg로 복사해서 내 피그마에 붙여넣음

3. 텍스트가 다 조각나있어서 바로 수정 불가. 삭제 후 비슷한 폰트와 크기로 텍스트 수정

4. 프레임을 png로 추출. 노션 퍼블릭 페이지에 업로드

5. 퍼블릭 이미지 링크가 생겼으니 개발자 도구에서 이미지 링크 교체

다행히 8분만에 성공하고 편-안하게 촬영을 마칠 수 있었어요. 나중에 영상 일부 교체하는 것도 귀찮았는데 다행이었죠.

프론트엔드 개발자라서 HTML 구성과 동작 방식을 알고, 브라우저 개발자 도구에 익숙한 게 참 감사한 순간이었습니다.