수십억 달러 규모의 기능적인 SaaS 복제하기 2부 - Figma. Claude Opus 4.6과 Codex 5.3이 출시됨에 따라 다시 한번 시도해 보았습니다. 결과물 - CanvasKit 사용 도구 - @windsurf Cascade 및 @OpenAI Codex CLI 첫 번째 에이전트 실행 - 30분 추가 프롬프트 포함 총 소요 시간 - 3시간 이것이 모델 평가를 위한 새로운 지표가 될 수 있을 것 같습니다 - TTBS(수십억 달러 규모의 SaaS 구축 시간 😂) 코드 및 세부 정보는 아래에 있습니다.

암호: github.com/dabit3/canvaskit… 이 앱은 Figma를 팀에 유용하게 만드는 다양한 테마 및 협업 기능을 모두 갖추고 있지는 않지만, 약간의 추가 작업을 통해 그러한 기능들을 구현할 수 있을 것으로 예상합니다. 특징: 도구 • 선택 도구(V) -- 클릭하여 선택, Shift 키를 누른 상태에서 클릭으로 여러 항목 선택, 드래그하여 영역 선택 • 프레임 도구(F) -- 자식 노드를 자르는 컨테이너 노드를 그리고 레이블을 표시합니다. • 사각형 도구(R) -- 사각형을 그립니다. Shift 키를 누르면 정사각형으로 고정됩니다. • 타원 도구(O) -- 타원을 그리고, Shift 키를 누르면 서클(Circle) 으로 고정됩니다. • 선 도구(L) -- 선을 그리고, Shift 키를 누르면 45도 각도로 스냅됩니다. • 폴리곤(Polygon) 도구 -- 삼각형/다각형 그리기 • 별 모양 도구 -- 별 모양을 그립니다 • 펜 도구(P) -- 자유형 벡터 경로 그리기 • 텍스트 도구(T) -- 클릭하여 텍스트를 배치하고, 두 번 클릭하여 인라인으로 편집합니다. • 손 도구(H) -- 드래그하여 캔버스를 이동합니다. • 확대/축소 도구(Z) -- 클릭하면 확대, Alt 키를 누른 상태에서 클릭하면 축소됩니다. 캔버스 • 무한 캔버스, 이동(스페이스바+드래그, 마우스 가운데 버튼 또는 손 도구) 및 확대/축소(휠 마우스) 기능 제공 • 확대율이 낮을수록 폴카닷(DOT) 격자 배경이 옅어지고, 15% 이하로 확대하면 완전히 사라집니다. • 확대/축소 사전 설정 -- 맞춤 확대(경계 상자 계산), 50%, 100%, 200% • 치수 표시 -- 도면 작성 및 크기 조정 중 가로 x 세로 치수를 보여주는 파란색 알약 모양 오버레이 • 스마트 가이드 -- 이동 중 모서리/중심이 다른 객체와 정렬되면 스냅 라인이 나타납니다. • 크기 조정 스냅 기능 - 크기 조정 중 활성 모서리가 주변 객체 모서리에 스냅됩니다. • 사용자 지정 회전 커서 -- 선택 핸들 외부의 회전 영역 위로 마우스를 가져가면 SVG 회전 아이콘이 나타납니다. 선택과 변환 • 이동 -- 스마트 가이드 스냅 기능을 사용하여 선택한 개체를 드래그하세요. • 크기 조절 - 8개의 핸들(모서리 + 중간점), 회전 인식 기능으로 회전된 객체에서도 핸들이 올바르게 작동합니다. • 회전 -- 경계 상자 모서리 바깥쪽을 드래그하고 Shift 키를 누르면 15도 단위로 회전합니다. • 다중 선택 -- Shift+클릭 또는 마우스 커서로 사각형 선택 • 정렬 버튼 -- 왼쪽, 가운데, 오른쪽, 위쪽, 중간, 아래쪽 정렬 (캔버스에 대해 단일 선택 또는 서로 간에 다중 선택에 사용 가능) • 간격 조정 -- 가로/세로 간격 조정 (선택한 개체가 3개 이상일 경우 사용 가능) 스타일링(속성 패널) • 변환 -- X, Y, 너비, 높이, 회전 개수 입력 • 모서리 반경 - 균일 또는 모서리별(TL, TR, BR, BL) 토글 기능 포함 • 불투명도 -- 0-100% 슬라이더 • 혼합 모드 -- 일반, 곱하기, 스크린, 오버레이, 어둡게 하기, 밝게 하기, 색상 닷지, 색상 번, 하드 라이트, 소프트 라이트, 차이, 제외, 색조, 채도, 색상, 밝기 • 채우기 - 채우기, 단색, 선형 그라디언트 또는 방사형 그라디언트를 추가/제거합니다. 그라디언트 정지는 개별 색상 선택기를 통해 가능합니다. • 획 -- 획 추가/제거, 단색, 두께 설정, 정렬(안쪽, 가운데, 바깥쪽); 텍스트 획 지원 • 효과 -- 효과 추가/제거: 그림자, 내부 그림자, 레이어 흐림, 배경 흐림; X/Y 오프셋, 흐림 반경, 표시/숨김 전환 설정 가능 • 색상 선택기 - HSV 사각형 + 색조 막대 + 알파 막대, 16진수 입력, RGB 표시, 20가지 사전 설정 색상 견본 • 운영체제 색상 선택기 -- 채우기 및 테두리 색상 선택을 위한 기본 시스템 색상 선택 버튼 타이포그래피(텍스트 노드) • 글꼴 모음 -- Google 글꼴 20개 로드됨 • 글꼴 두께 -- 100~900 • 글꼴 크기 -- 숫자 입력 • 줄 간격 -- 숫자 또는 자동 • 자간 - 숫자, 0.1 간격 • 텍스트 정렬 - 왼쪽, 가운데, 오른쪽, 양쪽 정렬 (각각의 SVG 아이콘 제공) • 텍스트 장식 -- 없음, 밑줄, 취소선 (캔버스 및 편집 오버레이에 표시됨) • 인라인 편집 -- 캔버스에서 텍스트를 두 번 클릭하여 스타일과 함께 직접 편집할 수 있습니다. 레이어 패널 • 현재 페이지의 모든 객체 트리 보기 • 드래그 앤 드롭으로 순서를 변경하여 z축 순서를 바꿀 수 있습니다. • 레이어별 표시/숨김 전환(눈 아이콘) • 레이어별 잠금 토글(자물쇠 아이콘) • 인라인 이름 변경 -- 레이어 이름을 두 번 클릭하여 이름을 변경합니다. • 선택 동기화 -- 레이어를 클릭하면 캔버스에서 해당 레이어가 선택되고, 반대로 캔버스에서 레이어를 선택하면 웹에서 레이어가 선택됩니다. • 상황별 메뉴 -- 옵션을 보려면 마우스 오른쪽 버튼을 클릭하세요 조직 • 그룹화 -- Ctrl/Cmd+G를 눌러 그룹화하고, Ctrl/Cmd+Shift+G를 눌러 그룹화를 해제합니다. • Z 순서 -- 앞으로 가져오기, 뒤로 보내기, 앞으로 가져오기, 뒤로 보내기 • 다중 페이지 지원 - 페이지 추가, 이름 변경, 전환 및 삭제 파일 작업 • 새 파일 -- 편집기 초기화 • 파일 열기 -- .canvas.json 문서 가져오기 • 파일 저장 -- .canvas.json 파일로 내보내기 • 이미지 가져오기 - 파일 메뉴, 드래그 앤 드롭 또는 클립보드 붙여넣기를 통해 가능하며, 뷰포트에 맞게 자동 크기 조정됩니다. • 문서 이름 -- 도구 모음에서 편집 가능 내보내다 • 형식 선택 -- PNG, JPG, SVG • JPG 화질 설정 • 배율 선택기 -- 0.5배, 1배, 2배, 3배, 4배 • SVG 내보내기 - 텍스트, 테두리, 회전, 선 및 도형을 처리합니다. Persistence • IndexedDB 자동 저장 -- 페이지 언로드/닫기 시 500ms 디바운스 및 즉시 플러시 • 자동 복원 -- 페이지 로드 시 마지막 세션을 복구합니다. 키보드 단축키 • 도구 단축키 -- V, F, R, O, L, T, P, H, Z • 편집 -- Ctrl/Cmd+Z 실행 취소, Ctrl/Cmd+Shift+Z 다시 실행, Ctrl/Cmd+C 복사, Ctrl/Cmd+V 붙여넣기, Ctrl/Cmd+D 복제, Delete/Backspace 삭제, Ctrl/Cmd+A 모두 선택 • 정렬 -- Ctrl/Cmd+G 그룹화, Ctrl/Cmd+Shift+G 그룹 해제, ] 앞으로 가져오기, [ 뒤로 보내기 • 보기 -- Ctrl/Cmd+0으로 100% 확대, Ctrl/Cmd+1으로 화면 맞춤, +/-로 확대/축소 • 바로가기 도움말 오버레이 -- ? 키를 누르면 분류된 모달 창에서 모든 바로가기 키를 볼 수 있습니다. UI • 다크 테마 -- Figma 스타일의 어두운 패널(#2c2c2c 배경) • 접을 수 있는 패널 -- 왼쪽(레이어) 및 오른쪽(속성) 패널 전환 • 상태 표시줄 -- 선택 항목 수, 위치, 크기, 회전, 확대/축소 수준 및 바로가기 버튼을 표시합니다. • 토스트 알림 - 사용자 피드백(저장, 가져오기, 오류)을 위한 임시 메시지 • SVG 아이콘이 포함된 툴바 - 시각적 구분선을 사용하여 카테고리별로 그룹화됨