Form 디자인 | 포지션, 가이드

Position

넥사크로 스튜디오에서는 폼이나 각 컴포넌트의 위치를 left, top, right, bottom width, height 속성값을 지정해 지정할 수 있습니다. 각 속성값은 픽셀 단위(px) 또는 퍼센트(%) 중 하나를 선택해서 사용할 수 있습니다. 기본 속성 외에 Position Base, Size Base 속성을 지원합니다.

기본 속성

넥사크로에서 사용하는 좌표계는 아래 그림과 같이 left, right, width, top, bottom, height 중 속성값 중 4개 속성값을 선택해 사용할 수 있습니다.

속성 창에서 Position 관련 속성의 단위는 픽셀(px)과 퍼센트(%)가 존재합니다. 각 속성의 단위는 둘 중에 하나만 선택할 수 있습니다. 속성 단위가 변경되면 속성값을 단위에 맞게 자동으로 변환합니다. 각 속성값은 부모 컴포넌트를 기준으로 설정되며 PositionBase를 설정한 경우에는 해당 컴포넌트를 기준으로 설정됩니다.

Form, Mainframe, Childframe은 퍼센트 단위로 크기를 지정할 수 없습니다. 실제 사용하는 너비와 높이를 픽셀 단위로만 지정할 수 있습니다.

Form은 left, right가 무조건 0이므로 위치 설정 없이 width, height 2개의 속성값만 설정합니다.

Form은 부모 화면이 존재하지 않기 때문에 퍼센트 단위를 사용할 수 없습니다.

컴포넌트의 left, right, width 속성 중 2개 항목, top, bottom, height 속성 중 2개 항목은 항상 설정되어야 합니다.

컴포넌트를 선택하고 속성창에서 기존에 설정된 속성 항목 중 하나를 선택하고 속성값을 삭제하면(또는 컨텍스트 메뉴에서 Remove Property Value 항목 선택) 다른 속성으로 대체되며 대체된 속성값은 자동 변환되어 설정됩니다.


left 속성값 삭제 시 right 또는 width 속성값 설정

top 속성값 삭제 시 bottom 또는 height 속성값 설정

width 속성값 삭제 시 left 또는 right 속성값 설정

height 속성값 삭제 시 top 또는 bottom 속성값 설정

right 속성값 삭제 시 left 또는 width 속성값 설정

bottom 속성값 삭제 시 top 또는 height 속성값 설정

Source 탭에서 left, right, width, top, bottom, height 속성 조합 중 하나를 강제로 지우고 저장한 경우 Design 탭에서 컴포넌트가 표시되지 않을 수 있습니다.

트래커

컴포넌트를 선택했을 때 Position 속성에 따라 해당하는 트래커(Tracker)는 붉은색(또는 파란색)으로 표시됩니다.

트래커 적용 이미지

속성값

left, top, width, height

left, top, right, bottom

left, top, width, bottom

left, top, right, height

컴포넌트의 positionstep 속성값이 -1이거나 두 개 이상의 컴포넌트를 선택하지 않은 경우에는 컴포넌트의 가운데 지점에 PositionBase 트래커가 표시됩니다.

두 개 이상의 컴포넌트를 선택한 경우에는 마지막 선택한 컴포넌트의 트래커만 채워진 점으로 표시되며 나머지 컴포넌트는 속이 비어있는 점으로 표시됩니다. 두 개 이상의 컴포넌트를 선택한 상태에서 메뉴[Design] 항목에서 Align, Space, Size, Position, Arrange 항목 선택 시 마지막 선택한 컴포넌트를 기준으로 관련 속성이 변경됩니다.

min, max, fittocontents 속성

컴포넌트의 높이, 너비의 최대, 최솟값을 지정할 수 있는 minwidth, minheight, maxwidth, maxheight 속성값을 지정할 수 있습니다. 해당 속성값을 설정한 경우에 width, height 속성값이 지정된 범위를 벗어나는 경우에는 width, height 속성값을 무시하고 min, max 속성값으로 지정한 값이 설정됩니다.

컴포넌트에 포함된 콘텐츠(텍스트, 이미지 등)에 맞게 컴포넌트의 크기(높이, 너비)를 변환하고자 할 때는 fittocontents 속성을 사용합니다. 예를 들어 ImageViewer 컴포넌트의 크기를 image 속성값으로 지정한 이미지 크기에 따라 변경할 수 있습니다.

속성값이 중복되는 경우 적용 순서는 아래와 같습니다.

minwidth > minheight > maxwidth > maxheight > fittocontents

예를 들어 현재 크기는 300x300인 ImageViewer 컴포넌트의 image 속성값으로 400x400 크기의 이미지 파일을 지정하고 maxheight 속성값이 350인 경우 ImageViewer 컴포넌트의 높이값은 350이 됩니다.

minwidth, minheight, maxwidth, maxheight, fittocontents 속성은 앱 실행 시 반영되는 속성입니다. 넥사크로 스튜디오 디자인 모드에서 해당 속성값에 따라 컴포넌트의 크기를 변경하려면 컴포넌트를 선택하고 메뉴[Design > Fit to Contents] 또는 툴바나 컨텍스트 메뉴에서 [Fit to Contents] 항목을 선택합니다.

넥사크로 스튜디오에서 [Fit to Contents] 기능을 수행하지 않고 앱을 실행하는 경우에는 넥사크로 스튜디오 디자인 모드에 표시된 컴포넌트 크기와 실행된 화면에 보이는 컴포넌트의 크기가 다를 수 있습니다.

minwidth, minheight, maxwidth, maxheight, fittocontents 속성값은 Form이 로딩되는 시점 또는 해당 속성값을 지정할 때 적용됩니다. 동적으로 콘텐츠의 크기가 변경되는 경우에 자동으로 반영되지는 않습니다.

PositionBase

컴포넌트의 위치를 지정할 때 부모 컴포넌트(Form, Div 등)을 기준으로 삼지 않고 같은 부모를 가지는 컴포넌트를 기준으로 위치를 지정할 수 있습니다. 부모 컴포넌트만을 기준으로 컴포넌트를 배치하는 경우에는 모든 컴포넌트의 위치를 부모 컴포넌트와 간격을 계산해 배치해야 했지만 컴포넌트를 기준으로 배치하는 경우에는 컴포넌트의 배치 간격만 정해지면 쉽게 배치할 수 있습니다.

아래 그림의 경우 첫 번째 행에 배치된 Button01 컴포넌트의 left 속성값은 "183"입니다. Button00 컴포넌트의 너비와 간격을 같이 계산해야 합니다. 하지만 두 번째 행에 배치된 Button01 컴포넌트의 left 속성값은 "Button00:28"과 같은 식으로 Base가 되는 컴포넌트와 Base 컴포넌트를 기준으로 간격만 지정합니다.

제약사항

제약사항에 따라 positionstep 속성값이 -1이거나 선택한 컴포넌트와 부모가 다르거나 positionstep 속성값이 다른 경우에는 속성창에 표시되지 않습니다. 또한, z-order가 자신보다 높은 컴포넌트도 속성창에는 표시되지 않습니다.

PositionBase 트래커

PositionBase 트래커는 하나의 컴포넌트를 선택했을 때 컴포넌트 영역의 가운데 [+] 형태로 표시됩니다. 해당 트래커를 마우스 버튼으로 누른 상태에서 Base 컴포넌트로 지정할 컴포넌트로 드래그하면 정확한 값을 지정할 수 있는 창이 표시되며 Base 컴포넌트를 지정할 수 있습니다.

1

컴포넌트를 선택하고 PositionBase 트래커를 마우스 버튼으로 누릅니다.

2

Base 컴포넌트로 지정할 컴포넌트로 트래커를 드래그해서 이동합니다. Base 컴포넌트로 지정할 수 있는 경우에는 대상 컴포넌트의 배경색이 변경됩니다.

3

컴포넌트의 어느 속성값을 Base 컴포넌트와 연결할 것인지 선택합니다. 드래그하는 방향에 따라 관련된 속성이 기본 표시됩니다. 각 속성값 앞부분에 체크박스를 선택하면 해당 값을 편집할 수 있습니다.

드래그 방향에 따라 지정되는 속성은 아래와 같습니다.

top, left

top

top, right

left

Component

right

bottom.left

bottom

bottom, right

4

Base 컴포넌트 연결이 완료되면 해당 컴포넌트를 선택했을 때 연결 관계를 선으로 표시합니다.

연결된 Base 컴포넌트를 선택했을 때는 점선으로 연결 관계를 표시합니다.

컴포넌트를 선택하지 않았을 경우에는 연결 관계를 표시하지 않습니다.

연결 관계 삭제

디자인창에서 연결 관계를 표시하는 선을 선택한 후 [Delete]키를 입력하거나 오른쪽 마우스 클릭 후 [Delete] 항목을 선택하면 연결 관계가 없어집니다. 컴포넌트를 선택하고 속성창에서 해당 속성값의 Base 항목을 지워도 연결 관계가 없어집니다.

컴포넌트의 positionstep 속성값이 변경되거나 z-order가 변경되는 경우에도 연결 관계가 삭제됩니다. 연결 관계가 삭제될 대상을 경고 메시지로 보여주고 삭제된 결과는 Output 창에 표시됩니다.

Position Editor

컴포넌트를 선택하고 오른쪽 마우스를 클릭한 후 미니 툴바에서 [Position Editor] 아이콘을 선택하거나 메뉴[Design > Position Editor]를 선택하고 실행할 수 있습니다.

Position Editor에서는 선택한 컴포넌트의 상위 오브젝트를 기준으로 속성값을 수정할 수 있습니다.

"Use anchor position" 옵션을 선택한 경우에는 원하는 항목을 고정시킨 상태에서 값을 수정할 수 있습니다. 아래 그림과 같은 경우 Left, Top 속성값이 고정된 상태이고 해당 속성값은 지울 수 없습니다.

가이드

가이드 관련 옵션은 메뉴 [Tools > Options > Form Design > Guide]에서 변경할 수 있습니다.

눈금자

폼 디자인 상에서 위치를 지정하면서 사용한 단위에 따라 레이아웃을 쉽게 배치할 수 있도록 눈금자의 단위도 픽셀과 퍼센트 둘 중에 하나를 선택할 수 있습니다.

Form 영역에서 마우스 커서를 이동할 경우 가로/세로 위치를 눈금자에서 표시합니다.

가이드 라인

가이드 라인은 눈금자(Ruler)에서 지원되는 기능으로 개발자가 임의로 수평/수직 방향으로 안내선을 만들어 해당 선에 컴포넌트를 정렬키는 기능을 지원합니다.

눈금자 위의 원하는 지점을 마우스로 클릭하면 가이드 라인이 생성되며, 생성된 가이드 라인은 마우스 드래그로 위치를 변경할 수 있습니다. 가이드 라인을 디자인 창 영역 밖으로 드래그앤드롭하거나 눈금자 위에 있는 가이드 라인의 역삼각형 아이콘을 더블 클릭해 제거할 수 있습니다.

Form에 레이아웃이 2개 이상 있는 경우 레이아웃에 따라 다른 가이드라인을 설정할 수 있습니다. 넥사크로 스튜디오를 종료하더라도 설정한 가이드라인은 그대로 유지됩니다.

가이드라인에 맞추어 컴포넌트를 배치한 경우에는 가이드라인을 이동하면 해당 방향으로 컴포넌트의 크기가 변경됩니다.

격자 표시

컴포넌트의 배치를 눈으로 쉽게 알아볼 수 있도록 Form 디자인 화면의 배경을 격자 형태로 제공합니다. 눈금자의 표시 단위에 따라 격자 간격을 다르게 설정할 수 있으며 아래와 같이 4가지 형식으로 표시할 수 있습니다.

Dot

Grid

DotGrid

Tile

격자 표시 형식은 눈금자의 표시 단위에 상관없이 지정된 형식으로 표시됩니다.

Snap

Form 디자인에서 컴포넌트를 이동하거나 크기를 변경할 때, 미세한 조정을 지원하기 위해 다른 컴포넌트나 옵션에서 설정된 Dot Grid에 가까이 가져가면 자동으로 해당 위치에 배치해주는 스냅(Snap) 기능을 지원합니다.

Alt키를 누른 채로 컴포넌트를 이동할 경우는 스냅 기능이 적용되지 않습니다.