bezier-curves

Figma Persona 20 (새 탭에서 열림)

Figma Persona 2022는 21개의 질문을 통해 자신의 창의적 협업 및 업무 방식을 돌아보게 하는 퀴즈다. 아이디어를 만들고 문제를 해결하는 방식, 작업 공간과 도구를 사용하는 방식, 다른 사람과 협업하는 방식을 분석해 8가지 페르소나 중 하나를 제시한다. 이 글의 결론은 자신의 성향을 이해하고, 그에 맞는 업무 환경과 협업 방식을 의식적으로 설계하자는 것이다. ## Figma Persona 퀴즈의 목적 - 연말에 자신의 업무 방식과 협업 습관을 되돌아보고 다음 해의 목표를 세우도록 돕는다. - 21개의 질문을 통해 개인의 창의적 특성을 분석한다. - 분석 기준은 다음 세 가지 축이다. - 아이디어를 생성하고 문제를 해결하는 방식 - 작업 공간을 구성하고 Figma 도구를 활용하는 방식 - 다른 사람과 소통하고 협업하는 방식 - 결과는 총 8개의 Figma Persona 중 하나로 나타난다. - 퀴즈 자체도 Figma 파일과 FigJam을 활용해 동료들과 함께 진행할 수 있도록 구성됐다. ## 정리된 개인주의자 정리된 개인주의자는 명확한 프로세스와 개인의 책임 범위를 선호하는 유형이다. - 혼자 집중할 수 있는 시간을 가진 뒤 팀과 다시 공유하는 방식을 좋아한다. - 실시간 회의보다 비동기 업데이트, 버그 검토, 명확한 마일스톤을 선호한다. - 정돈된 작업 환경과 분명한 산출물, 체계적인 프로세스에서 높은 생산성을 발휘한다. - 협업할 때는 충분히 생각할 시간을 주고, 사전 자료와 기대 결과를 명확하게 전달하는 것이 효과적이다. - 요청 사항을 모호하게 표현하기보다 구체적이고 정확하게 설명해야 한다. ## Type 1: Lone Ascender Lone Ascender는 체계적이고 분석적인 개인주의자다. - 복잡한 문제를 해결할 때 강점을 보인다. - 전술적이고 실용적이며 시스템 중심의 해결책을 선호한다. - 거의 모든 일에 자신만의 프로세스를 만들 정도로 구조화된 업무 방식을 갖고 있다. - 단축키, 색상 코드 등 도구 사용법을 빠르게 익히고 반복 작업을 효율화한다. - 이상적인 접근보다 현실적이고 확장 가능한 해결책을 중시한다. - 협업 자체를 거부하지는 않지만, 자신의 파일 구조와 작업 규칙이 흐트러지는 것을 불편해할 수 있다. - 적절한 도구로는 Figma의 단축키와 빠른 실행 기능, 다양한 FigJam 템플릿 등이 제시된다. ## 나머지 Figma Persona 유형 글은 Lone Ascender 외에도 다음 7가지 협업 성향을 제시한다. - **Canvas Captain**: 캔버스와 작업 공간을 주도적으로 구성하고 관리하는 유형 - **Direct Mobilizer**: 명확하고 직접적인 소통으로 사람들을 움직이는 유형 - **Artful Detacher**: 작업과 감정을 적절히 분리하고 필요할 때 한발 물러나는 유형 - **Bounding Boxer**: 작업 범위와 구조를 명확히 설정하는 유형 - **Branch Merger**: 여러 아이디어나 작업 흐름을 하나로 통합하는 유형 - **Vector Networker**: 다양한 사람과 연결하며 협업 네트워크를 확장하는 유형 - **Bézier Curve Baller**: Figma의 세부적인 디자인 기능과 조형적 표현을 능숙하게 다루는 유형 이 유형들은 우열을 가리는 분류가 아니라, 각자가 아이디어를 만들고 파일을 다루며 협업하는 방식을 재미있게 이해하기 위한 자기 진단 도구다. ## 자신의 Persona를 협업에 활용하는 방법 - 자신의 강점뿐 아니라 협업 과정에서 생길 수 있는 불편함도 파악한다. - 혼자 생각할 시간이 필요한 사람에게는 회의 전에 비동기 사전 작업을 제공한다. - 업무 요청 시 목표, 산출물, 마감일, 의사결정 기준을 구체적으로 제시한다. - 정리와 구조화를 중시하는 사람에게는 자유로운 브레인스토밍만 요구하기보다 명확한 범위와 기대치를 함께 전달한다. - 팀원마다 작업 방식이 다르다는 점을 인정하면 불필요한 충돌을 줄이고 협업 효율을 높일 수 있다. 자신의 Persona를 고정된 성격 유형으로 받아들이기보다, 현재의 업무 습관을 점검하는 출발점으로 활용하는 것이 좋다. 특히 팀 전체가 함께 퀴즈를 진행하면 서로에게 필요한 소통 방식과 협업 조건을 더 쉽게 이해할 수 있다.

스쿼클을 간절히 찾 (새 탭에서 열림)

피그마 엔지니어가 iOS의 ‘스퀴클(squircle)’을 Figma에 구현하기 위해 수학적 형태를 분석한 과정을 설명한다. 스퀴클은 단순한 둥근 사각형이 아니라 직선과 곡선의 연결부에서 곡률이 연속적으로 변해 더 자연스럽고 독립적인 형태로 인식된다. 처음에는 슈퍼타원으로 설명할 수 있다고 보았지만, 실제 애플 아이콘과 비교한 결과 체계적인 오차가 발견되며 더 정교한 모델이 필요해졌다. ## 디자인 문제로서의 스퀴클 - 스퀴클은 ‘square’와 ‘circle’을 합친 표현으로, iOS 7에서 애플 앱 아이콘에 적용되며 널리 알려졌다. - 기존의 둥근 사각형은 직선과 원호가 만나는 지점에서 곡률이 갑자기 바뀐다. - 스퀴클은 이 전환을 부드럽게 만들어 외곽선 전체의 곡률이 연속적으로 이어진다. - 수학적으로 작은 차이지만, 시각적으로는 형태가 단순히 모서리를 깎은 사각형이 아니라 하나의 유기적인 물체처럼 보이게 한다. - 맥북 모서리나 유선 이어버드 케이스처럼 산업 디자인에서도 곡률의 연속성은 표면의 하이라이트와 물체의 인상에 큰 영향을 준다. ## 공학에도 적용되는 디자인의 제약 - 글은 Charles Eames의 디자인 정의인 “특정 목적을 달성하기 위해 요소를 배열하는 계획”에서 출발한다. - 디자인의 핵심은 가능한 많은 제약을 인식하고, 그 제약 안에서 작업하는 데 있다. - 엔지니어링에서도 시간, 단순성, 유지보수성, 미적 완성도 같은 제약을 함께 고려해야 한다. - 스퀴클 구현 과정은 수학적 문제를 다루지만, 탐색·실패·숨은 문제 발견·제약의 변화·해결이라는 전형적인 디자인 과정과 동일한 구조를 가진다. ## 슈퍼타원이라는 첫 번째 해법 - 스퀴클의 정확한 수학적 표현을 찾기 위해 기존 연구를 조사했고, 초기에는 슈퍼타원이 유력한 후보로 제시됐다. - 슈퍼타원은 다음과 같은 형태로 표현할 수 있다. \[ \left|\frac{x}{a}\right|^n + \left|\frac{y}{b}\right|^n = 1 \] - \(n=2\)이면 일반적인 타원이 된다. - \(a=b=1, n=2\)이면 단위원이 된다. - \(n>2\)로 설정하면 모서리가 점점 사각형에 가까워진다. - \(n\)이 무한대로 커지면 경계가 직사각형에 가까워진다. - 초기 분석에서는 \(n=5\) 정도의 슈퍼타원이 애플 아이콘과 매우 비슷하게 보였다. - 이 모델이 정확하다면 Bézier 곡선 여러 개로 근사한 뒤 Figma의 도형 시스템에 통합할 수 있었다. ## 실제 아이콘과의 불일치 - 슈퍼타원은 시각적으로는 매우 유사했지만 실제 iOS 아이콘의 외곽선을 정확히 설명하지 못했다. - 가능한 \(n\) 값을 바꿔도 실제 형태와 비교하면 작지만 일관된 차이가 남았다. - 이는 단순한 측정 오차가 아니라 모델 자체의 구조적 한계였다. - 따라서 “비슷하게 보이는 우아한 공식”을 사용하는 것만으로는 충분하지 않았고, 사용자가 기대하는 실제 애플 형태를 재현하려면 더 정확한 곡선 모델이 필요했다. - 이후 연구에서는 여러 개의 Bézier 곡선을 조합해 스퀴클 모서리를 구성하는 가설이 제시되며 다음 단계로 이어진다. 정확한 그래픽 구현에서는 시각적으로 비슷한 근사식과 실제 디자인을 충실히 재현하는 모델을 구분해야 한다. 특히 곡률 연속성처럼 작은 수학적 차이가 최종 형태의 인상과 품질을 좌우할 수 있으므로, 공식의 단순성보다 실제 데이터와의 검증이 중요하다.

벡터 네트워크의 삭제 및 복구 | (새 탭에서 열림)

Figma의 “삭제 후 복구(Delete and Heal)”는 정점을 단순히 제거하는 기능이 아니라, 주변 선과 곡률을 최대한 보존하며 벡터 구조를 재구성하는 작업이다. 단순한 경로에서는 인접 정점을 연결하면 되지만, 곡선과 벡터 네트워크에서는 베지어 곡선 근사와 그래프 구조를 함께 고려해야 한다. Figma는 이 기능을 통해 복잡한 벡터 네트워크에서도 자연스러운 편집 결과를 제공한다. ## 삭제와 삭제 후 복구의 차이 - 일반적인 정점 삭제는 해당 정점에 연결된 모든 선분과 그 선분에 닿는 채우기 영역을 함께 제거한다. - “삭제 후 복구”는 삭제된 정점 양쪽의 구조를 새 선으로 연결해 기존 형태를 유지하려는 기능이다. - 한쪽에만 선이 연결된 정점은 연결할 대상이 없으므로 선을 제거한다. - 삼각형처럼 정점 수가 줄어드는 경우에도 결과가 항상 같지는 않다. - 어떤 경우에는 두 정점 사이의 단일 선으로 축소된다. - 다른 경우에는 두 개의 선이 유지될 수 있다. - Figma는 정점과 선의 연결 관계에 따라 결과를 다르게 처리한다. ## 곡선의 형태를 보존하는 복구 - 곡선 위의 정점을 삭제하면 단순히 양 끝점을 직선으로 연결할 경우 기존 곡률이 사라진다. - 다른 도구는 인접 정점의 곡률 핸들 위치를 그대로 유지하는 경우가 많다. - Figma는 원래 곡선을 최대한 근사하도록 인접 정점의 제어 핸들을 조정한다. - 각 곡선 선분은 cubic Bézier curve로 표현된다. - 복구 문제는 다음 두 개의 cubic Bézier 곡선을 하나의 곡선으로 근사하는 문제로 바뀐다. - 첫 번째 곡선: `(P0, P1, P2, P3)` - 두 번째 곡선: `(P3, P4, P5, P6)` - 새 곡선: `(P’0, P’1, P’2, P’3)` - 벡터 네트워크의 나머지 부분을 변경하지 않기 위해 새 곡선의 양 끝점은 고정한다. - `P’0 = P0` - `P’3 = P6` - 따라서 계산해야 하는 것은 새 곡선의 제어점 `P’1`, `P’2`다. ## 베지어 곡선 근사 알고리즘 - 먼저 두 기존 곡선을 따라 여러 샘플 점을 생성한다. - cubic Bézier의 매개변수 `t`에 값을 대입해 곡선 위의 점을 계산한다. - 두 곡선이 공유하는 끝점은 중복해서 세지 않는다. - 예를 들어 각 구간에 여러 `t` 값을 적용하면 전체 연결 곡선 위의 샘플 점 목록을 얻을 수 있다. - 생성된 점들을 하나의 cubic Bézier 곡선으로 피팅한다. - Figma는 Philip J. Schneider의 “An Algorithm for Automatically Fitting Digitized Curves” 알고리즘과 관련 구현을 활용한다. - 결과적으로 삭제 전의 곡률을 완벽히 복원하지는 않지만, 시각적으로 자연스러운 단일 곡선을 얻는다. ## 벡터 네트워크와 그래프 기반 삭제 - Figma의 벡터 객체는 일반적인 순차 경로가 아니라 무방향 그래프로 표현된다. - 더 정확히는 각 선 자체의 식별성을 가진 무방향 멀티그래프다. - 따라서 하나의 정점에 최대 두 개의 선만 연결된다는 경로 기반 도구의 가정을 사용할 수 없다. - 삭제 대상 정점에 세 개 이상의 선이 연결될 수 있으며, 이 경우 어떤 선끼리 연결할지 결정해야 한다. - 연결된 선의 개수가 홀수라면 모든 인접 선을 제거한다. - 남는 선을 자연스럽게 짝지을 방법이 없기 때문이다. - 연결된 선의 개수가 짝수라면 선들을 쌍으로 묶어 새 선을 만든다. - 이때 “서로 반대편에 있는 선”을 정의하기 위해 정점에서 뻗어나가는 선을 각도 기준으로 정렬한다. - 정렬된 방향을 바탕으로 서로 마주 보는 선끼리 연결해 네트워크 구조를 복구한다. ## 실용적인 결론 벡터 편집기의 삭제 기능은 단순한 데이터 제거가 아니라, 그래프 연결성·곡선 근사·사용자 기대를 함께 처리하는 기하학적 재구성 문제다. 특히 벡터 네트워크를 지원하려면 정점 차수가 2를 넘는 상황과 곡선 제어점까지 고려해야 하며, Bézier 샘플링과 곡선 피팅을 결합하는 방식이 실용적인 해결책이 된다.

벡터 네트워크 소개 | 피그 (새 탭에서 열림)

Figma는 기존의 단일 경로(path) 모델을 확장한 **벡터 네트워크(vector networks)** 를 소개한다. 벡터 네트워크는 점과 선을 자유롭게 연결·분리할 수 있어 복잡한 도형을 더 직관적으로 편집하게 해주며, 기존 벡터 데이터와의 호환성도 유지한다. 직접 곡선을 구부리고 영역을 클릭해 채우거나 뚫을 수 있어, 기존 벡터 편집기의 불편한 동작을 크게 줄이는 것이 결론이다. ## 기존 경로 모델의 한계 - 기존 path는 두 끝점을 가진 선과 곡선이 하나의 연속된 체인을 이루는 구조다. - 펜 플로터가 선을 따라 이동하듯, 점과 곡선을 정해진 순서로 연결해야 한다. - 세 개 이상의 선이 한 점에 연결되는 구조를 표현하기 어렵다. - 일부를 삭제하거나 도형을 분리·재결합할 때 사용자가 연결 관계를 직접 관리해야 해 조작이 부자연스럽다. - 선을 연결하거나 해제하는 동작도 상황에 따라 다르게 작동해 직관성이 떨어진다. ## 자유로운 연결을 지원하는 벡터 네트워크 - 벡터 네트워크에서는 임의의 두 점 사이에 선이나 곡선을 연결할 수 있다. - 모든 선이 하나의 단일 체인을 이룰 필요가 없으므로, 여러 선이 한 점에서 만나는 구조를 자연스럽게 표현한다. - 도형의 일부를 어디서든 삭제하고, 필요한 요소를 다시 연결할 수 있다. - 선의 cap과 join 스타일이 분기점에서도 자연스럽게 동작한다. - 기존 path와 동일한 곡선 데이터를 사용하므로 기존 벡터 데이터와의 하위 호환성을 유지한다. - 사용자 테스트에서는 많은 사용자가 구조적 차이를 의식하지 않아도 원하는 방식으로 편집할 수 있었다. ## 곡선을 직접 조작하는 벤드 도구 - 기존 벡터 그래픽은 cubic Bézier 곡선과 곡선 바깥에 위치한 control handle로 형태를 조정한다. - 따라서 사용자는 곡선 자체가 아니라 멀리 떨어진 핸들을 움직여야 했다. - Figma의 bend tool은 곡선 위를 직접 드래그할 수 있게 한다. - 사용자가 곡선을 원하는 위치로 움직이면 편집기가 적절한 control handle의 위치를 자동으로 계산한다. - 새로운 곡선 형식을 도입하는 대신 기존 Bézier 기반 구조를 유지해 호환성과 직접 조작성을 함께 확보했다. ## 직관적인 영역 채우기 - 기존 벡터 엔진은 winding number를 사용해 영역의 안팎을 판단한다. - 이 방식은 곡선을 시계 방향 또는 반시계 방향으로 그렸는지에 따라 채우기 결과가 달라진다. - 사용자는 곡선의 방향을 직접 볼 수 없기 때문에 구멍과 채우기 동작을 예측하기 어렵다. - Figma는 기본적으로 곡선이 둘러싼 모든 영역을 자동으로 채운다. - 구멍이 필요하면 곡선 방향을 조정하는 대신 paint bucket 도구로 해당 영역을 직접 토글해 채우기를 제거한다. - 이 방식은 음의 공간을 별도로 구성해야 했던 기존 접근보다 도형 내부와 구멍을 이해하기 쉽다. ## 개발 과정과 설계 방향 - 경로 모델처럼 기본적인 벡터 구조를 다시 설계하는 과정은 여러 시행착오를 거쳤다. - 초기에는 더 강력한 곡선 형식도 실험했지만, 기존 벡터 데이터와의 호환성을 위해 Bézier 곡선을 유지했다. - 영역 채우기는 특히 어려운 문제였으며, 사용자가 구멍을 직접 정의해야 하는 접근은 복잡하다는 결론을 내렸다. - 최종적으로 자유로운 연결, 직접 곡선 조작, 영역 토글 방식을 결합해 기존 편집기의 동작을 더 자연스럽게 만들었다. 벡터 네트워크의 핵심 가치는 새로운 그래픽 형식을 도입하는 데 있지 않고, 기존 벡터 구조를 유지하면서도 편집 방식을 사용자의 직관에 맞게 바꾼 데 있다. 벡터 편집기를 설계할 때는 내부 데이터 모델의 제약보다 사용자가 점·선·영역을 어떻게 직접 조작하고 싶어 하는지를 우선하는 것이 실용적인 방향이다.