산업 분야

자동차

항공/우주

금융

게임

메디테크 (MedTech)

IoT

디지털 제품

활용 사례

기업용

개인용

팀용

교육용

주요 특징

하드웨어 및 시스템 통합

Beta

ProtoPie MCP

멀티 디바이스 프로토타이핑을 위한 ProtoPie

인터랙션 로직을 위한 ProtoPie

개발자 인수인계

ProtoPie AI

New

User Testing

플러그인

Figma

Sketch

Adobe XD

인사이트 & 영감

블로그

eBook

고객 성공 사례

이벤트 및 웨비나

ProtoPie 갤러리

제품 학습 및 지원

프로토파이 스쿨

ProtoPie 다운로드

프로덕트 도큐멘테이션

커뮤니티

산업 분야

자동차

항공/우주

금융

게임

메디테크 (MedTech)

IoT

디지털 제품

활용 사례

기업용

개인용

팀용

교육용

주요 특징

하드웨어 및 시스템 통합

Beta

ProtoPie MCP

멀티 디바이스 프로토타이핑을 위한 ProtoPie

인터랙션 로직을 위한 ProtoPie

개발자 인수인계

ProtoPie AI

New

User Testing

플러그인

Figma

Sketch

Adobe XD

인사이트 & 영감

블로그

eBook

고객 성공 사례

이벤트 및 웨비나

ProtoPie 갤러리

제품 학습 및 지원

프로토파이 스쿨

ProtoPie 다운로드

프로덕트 도큐멘테이션

커뮤니티

메뉴

구문

인간의 언어와 마찬가지로, ProtoPie의 공식에도 고유한 규칙과 원칙이 있습니다. 구문(syntax)으로 알려진 이러한 규칙은 텍스트, 숫자, 레이어 속성, 변수 등의 서로 다른 요소들이 결합하여 공식을 구성하는 방식을 규정합니다.

구문을 이러한 요소들을 조립하여 원하는 결과를 얻을 수 있도록 안내하는 프레임워크로 생각하세요. ProtoPie의 구문 규칙을 이해하고 따르면, 프로토타입에 생동감을 불어넣는 강력하고 다이내믹한 공식을 만들 수 있습니다.

리터럴 값 사용하기

공식에서 레이어 속성, 텍스트, 숫자와 같은 요소를 사용할 때는 특정 규칙을 따라야 합니다.

레이어 속성

레이어를 참조하려면 레이어 이름 앞뒤에 백틱(`)을 사용하세요. 혼선을 방지하기 위해 레이어 이름은 고유하게 설정하는 것을 강력히 권장합니다.

레이어 속성을 사용하려면 두 번째 백틱 뒤에 마침표(.)를 입력하고 이어서 속성을 추가하세요.

자세히 알아보기: 레이어 속성

텍스트

텍스트 앞뒤로 큰따옴표(")를 사용하세요.

여러 줄 텍스트

줄 바꿈을 추가하려면 단어나 문자 사이에 "\n"을 추가하세요.

숫자

아라비아 숫자(0-9)만 사용하세요.

색상

#FFFFFF 형식(헥사 코드)의 색상을 사용하세요.

변수

변수를 참조하려면 변수 이름을 그대로 사용하세요. 변수 이름에는 라틴 알파벳 문자, 숫자, 밑줄(_)만 사용할 수 있습니다.

자세히 알아보기: 변수

연산하기

간단한 연산을 하려면 기본 산술 연산자(+, -, *, /) 및 나머지 연산자(%)를 사용하세요.

산술 연산

숫자에 대한 기본 산술 연산은 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/)입니다.

나머지 연산

나눗셈의 나머지를 구하려면 나머지 연산자(%)를 사용하세요. 예를 들어, 5 % 2는 결과가 1이 되는데, 이는 단순히 5를 2로 나누면 몫이 2이고 나머지가 1이기 때문입니다.

텍스트 결합하기

산술 연산은 대개 숫자에 적용됩니다. 하지만 텍스트를 결합하기 위해 더하기(+)를 사용하는 것도 가능합니다. 텍스트가 다른 텍스트와 "더해지면", 두 텍스트가 결합된 새로운 텍스트가 결과물로 나옵니다.

텍스트 + 텍스트

둘 이상의 텍스트를 결합하려면 더하기(+) 기호를 사용하세요. 다시 한번 강조하지만, 텍스트 앞뒤에는 항상 큰따옴표(")를 사용해야 합니다.

텍스트 + 숫자

둘 이상의 텍스트와 숫자를 결합하려면 더하기(+) 기호를 사용하세요. 결과는 항상 새로운 텍스트가 됩니다.