방향과 좌표

말풍선 꼬리 방향과 생각점 좌표: 여러 화자에서도 헷갈리지 않게 배치하기

말풍선 본체와 꼬리·생각점 좌표를 분리해 한 명부터 여러 명까지 화자 방향과 겹침을 안정적으로 관리하는 원칙을 설명합니다.

꼬리는 방향 아이콘이 아니라 화자 연결선이다

꼬리를 단순히 왼쪽·오른쪽으로 저장하면 캐릭터가 움직이거나 말풍선 크기가 달라질 때 쉽게 어긋납니다. 먼저 장면 좌표계에서 화자의 목표점을 정하고, 말풍선 외곽의 연결점에서 그 목표점까지 꼬리를 계산해야 합니다.

목표점은 캐릭터 중심보다 얼굴 또는 입 주변이 자연스럽습니다. 다만 꼬리 끝이 얼굴 위를 덮지 않도록 작은 간격을 남기고, 최종 시선은 화자를 분명히 지목하도록 합니다.

  • bodyBounds: 말풍선 본체의 left, top, right, bottom 경계
  • connectorBounds: 꼬리 또는 생각점 전체가 차지하는 별도 경계
  • targetPoint: 화자의 얼굴·입 근처에서 실제로 향하는 점
  • attachmentPoint: 본체 윤곽에서 꼬리가 시작되는 점
  • z: 캐릭터·텍스트·효과 사이에서 겹침 순서를 정하는 값

화자가 두 명 이상일 때의 우선순위

여러 화자 장면에서는 말풍선마다 speakerId를 먼저 지정하고, 각 화자의 얼굴 안전영역과 다른 말풍선의 본체·꼬리 경계를 장애물로 취급합니다. 그 뒤 위쪽 여백, 읽기 순서, 꼬리 길이를 함께 평가합니다.

복수 화자 자동 배치에서 확인할 항목
순서확인 항목실패 예
1대사와 speakerId 연결말풍선은 맞지만 다른 캐릭터를 가리킴
2각 화자의 faceBounds 확보꼬리 끝이 눈·표정을 덮음
3body와 connector를 별도 충돌 검사본체는 안 겹치지만 꼬리가 다른 대사를 통과함
4위→아래, 좌→우 읽기 순서 확인대사 순서가 시각 순서와 뒤바뀜
5최종 크기에서 텍스트 안전영역 확인축소 뒤 글자가 윤곽이나 꼬리에 닿음

생각점은 점 하나가 아니라 연결 컴포넌트다

생각 구름 아래의 원들은 각각 크기와 위치를 가지므로 마지막 점 하나만 검사하면 중간 점이 얼굴이나 소품과 겹칠 수 있습니다. 점 묶음 전체의 경계와 각 점의 중심·반지름을 기록해야 합니다.

정석 배치에서는 가장 작은 점이 화자에 가깝고, 큰 점으로 갈수록 본체에 가까워집니다. 의도적인 겹침은 디자인 옵션으로 남길 수 있지만 기본값은 얼굴과 텍스트를 침범하지 않는 배치가 안전합니다.

말풍선 꼬리 방향말풍선 위치만화 말풍선 배치여러 화자 말풍선생각점 좌표

자주 묻는 질문

꼬리 끝을 캐릭터 중심으로 향하게 하면 안 되나요?

몸 전체 중심은 화자를 모호하게 만들 수 있습니다. 얼굴 또는 입 근처 목표점을 쓰고, 실제 표정과 겹치지 않도록 간격을 두는 편이 좋습니다.

말풍선끼리 조금 겹쳐도 되나요?

의도된 대화 리듬이나 말 끊김을 표현할 때는 가능하지만, 기본 자동 배치에서는 본체·꼬리·생각점·텍스트 경계를 모두 분리해 겹침을 피하는 것이 안전합니다.

화자가 많아지면 꼬리를 길게 늘리면 되나요?

긴 꼬리만으로 해결하면 다른 요소를 가로지르기 쉽습니다. 먼저 말풍선 본체 위치와 읽기 순서를 조정한 뒤 필요한 만큼만 꼬리를 늘립니다.