퓨즈[Fusetools] 문서[Docs] 번역

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. 리소스
  4. 스케치[Sketch]에서 가져오기

스케치[Sketch]에서 가져오기

스케치에서 애셋 가져 오기

스케치[Sketch]는 Mac 사용자를 위한 훌륭한 벡터 디자인 도구입니다. 해본 적이 없다면 확인해 보십시오!

퓨즈는 다음과 같은 것들을 할 수 있습니다:

  • 잘라진 이미지, 글꼴 및 즉시 사용 가능한 UX 태그로부터 .sketch 파일에서 애셋 가져오기.
  • 한번 가져온 후 스케치 파일을 변경하면 실시간으로 애셋이 업데이트 됩니다.

참고: .sketch 파일 가져오기는 Mac OS X(Sketch와 유사)에서만 작동하며 현재 실험 중입니다.

모범 사례

퓨즈에서 사용할 .sketch 파일을 작업할 때는 다음 사항에 유의하십시오:

  • 퓨즈의 태그 이름은 스케치의 레이어 이름과 일치하므로 레이어 이름을 의미있게 유지하십시오.
  • 대상 디바이스와 일치하는 아트보드 크기를 사용하십시오. 예를 들어, iPhone 6 용으로 설계하는 경우 Sketch에서 iPhone 6 아트보드 템플릿을 사용하십시오. 이렇게 하면 내보낼 때 애셋이 올바른 크기가 됩니다.
  • 스케치의 아트보드는 퓨즈의 페이지에 해당하지만 반드시 필요하지는 않습니다.

가져오기(Importing)

스케치 가져오기 도구를 사용하려면 먼저 보헤미안 코딩으로 SketchTool을 설치해야 합니다. 이 파일은 여기에서 다운로드 할 수 있습니다. 압축을 풀고 설치 스크립트를 실행하십시오.

스케치 문서를 가져오기 위해, ‘MyDesign.sketch’를 생성하고 파일을 퓨즈 프로젝트 폴더에 복사하십시오.

터미널에서 아래와 같이 실행하세요.

1
fuse import MyDesign.sketch

가져오기는 문서의 애셋 갯수에 따라 다소 시간이 걸릴 수 있습니다.

드래그앤드랍으로 가져오기

터미널을 사용하는 대신에 .sketch 파일을 퓨즈 프리뷰 창으로 끌어다 놓을 수 있습니다. 이렇게 하면 스케치 파일이 프로젝트의 루트 폴더에 복사되고(동일한 파일명이 없는 경우) 동일한 작업이 수행됩니다. 같은 이름을 가진 기존 .sketch 파일은 덮어 씁니다.

리소스 라이브러리

가져오기가 완료되면 – 모두 정상적으로 진행된 경우 – 퓨즈가 .sketch 파일과 동일한 경로에 MyDesign.sketch.ux라는 파일을 생성합니다. 텍스트 편집기로 열어서 내부 내용을 확인하십시오.

이 파일은 퓨즈가 스케치 문서에서 추출할 수 있었던 모든 애셋을 포함하는 리소스 라이브러리입니다. 프로젝트에 자동으로 포함되며 리소스를 사용할 수 있습니다.

리소스 라이브러리는 아무 작업도 수행하지 않으며, 내보낸 앱의 용량에 포함되지 않습니다. 다른 UX 파일에서 참조하는 자산만 최종 앱에 포함되며 나머지는 제거됩니다.

글꼴(Fonts)

퓨즈는 시스템에서 필요한 글꼴을 자동으로 추출하여 .sketch 파일 옆의 -assets/ 폴더에 넣습니다. 또한 리소스 라이브러리의 전역 리소스로 선언합니다.

리소스 라이브러리에서는 다음과 같이 보입니다:

1
<Font File="MyDesign.sketch-assets/HelveticaNeue.ttf" ux:Global="HelveticaNeue" />

다음과 같이 사용할 수 있다는 것을 의미합니다:

1
<Text Font="HelveticaNeue">Hello, world!</Text>

이미지

스케치 문서의 이미지는 Image 클래스를 확장하고 MultiDensityImageSource를 사용하여 렌더링된 애셋을 가리키는 클래스(ux:Class)로 나타납니다.

클래스 이름은 스케치의 레이어 이름에 해당합니다. MyDesign.sketch라는 파일에 SomeGroup이라는 레이어 그룹과 SomeLayer라는 레이어가 포함된 Screen1이라는 아트 보드가 포함된 경우 이 이미지의 인스턴스를 다음과 같이 만들 수 있습니다:

1
<MyDesign.Screen1.SomeGroup.SomeLayer />

이 태그는 이미지이므로 Image 클래스와 동일한 속성을 지원합니다. Alignment, Margin, StretchMode 및 Scale9Margin.

이것은 리소스 라이브러리 파일(.sketch.ux)에서 생성된 클래스를 가지고 있기 때문에 가능한 것입니다:

1
2
3
4
5
6
<Image ux:Class="MyDesign.Screen1.SomeGroup.SomeLayer">
  <MultiDensityImageSource>
   <FileImageSource File="MyDesign.sketch-assets/MyDesign.Screen1.SomeGroup.SomeLayer@1x.png" Density="1.0" />
   <FileImageSource File="MyDesign.sketch-assets/MyDesign.Screen1.SomeGroup.SomeLayer@2x.png" Density="2.0" />
  </MultiDensityImageSource>
</Image>

이미지 파일은 .sketch 파일과 동일한 경로에 있는 ‘MyDesign.sketch-assets/’ 폴더에 저장됩니다.

자동 생성된(Auto-generated) 앱 레이아웃

퓨즈는 가져온 리소스 라이브러리를 기반으로 앱 레이아웃을 생성하므로 스케치 디자인과 똑같은 퓨즈 스크린을 얻게 됩니다. 여기에는 도형 및 이미지 외에도 텍스트 요소가 포함되어 있어서 반응이 빠른 앱 레이아웃을 만들기 위한 좋은 출발점이 될 수 있습니다.

가져오기를 통합하기 위해 ‘–app’ 또는 (–overwrite-app) 옵션을 지정하여 이 작업을 수행할 수 있습니다. 예를 들면:

1
fuse import MyDesign.sketch --app MyDesign.ux

그러면 MyDesign.ux가 생성됩니다. MyDesign.ux에는 App 태그와 PageControl이 있고 스케치 파일의 각 아트보드에 대한 페이지가 하나씩 포함됩니다.

퓨즈는 스케치 파일에서 가능한 한 정확하게 레이아웃을 재현합니다. 이는 현재 스케치 파일을 정확하게 일치시키는 모든 요소의 절대 위치 지정을 의미합니다.

퓨즈는 UX 코드를 최적화하여 레이아웃 규칙을 자동 감지하는 도구를 개발하고 있습니다. 업데이트를 다시 확인하십시오!

애셋의 실시간 업데이트

원본 가져오기 후 ‘fuse import’를 다시 실행하면 리소스 라이브러리가 최신 애셋으로 업데이트(덮어 쓰기)되고 프로젝트에서 사용중인 모든 애셋이 프리뷰 세션에서 자동으로 업데이트 됩니다.

스케치 레이어의 이름이 변경되지 않은 경우 클래스의 이름은 동일하게 유지됩니다.

이미지 밀도(Image densities)

스케치 문서를 가져올 때 옵션값을 지정하면, 이미지 밀도를 제어할 수 있습니다. 예를 들면:

1
fuse import MyDesign.sketch --1x --1.5x --2x

모든 이미지 애셋을 각각 1.0, 1.5 및 2.0 밀도로 가져옵니다. 아무것도 지정하지 않으면 퓨즈는 기본적으로 1.0 및 2.0 밀도로 렌더링 합니다.

애셋 이름 정하기(Asset aliasing)

때로는 .sketch 파일을 가져올 때 애셋의 이름이 길고 비실용적일 수 있습니다. 이는 문서의 생성과 동시에 퓨즈로 가져오면서 적절하게 명명되지 않았기 때문입니다.

일반적으로 다음과 같은 것을 것입니다:

1
2
3
4
5
6
<Image ux:Class="activity.Activity___6.Rectangle_91___Bitmap_2">
    <MultiDensityImageSource>
        <FileImageSource File="activity.sketch-assets/Activity___6.Rectangle_91___Bitmap_2@1x.png" Density="1" />
        <FileImageSource File="activity.sketch-assets/Activity___6.Rectangle_91___Bitmap_2@2x.png" Density="2" />
    </MultiDensityImageSource>
</Image>

UX 코드가 그다지 좋아 보이지 않습니다. 또한 클래스의 이름을 바꾸고 싶지 않을 것입니다. 왜냐하면 .sketch 파일에 대한 링크가 없어지고 더 이상 실시간 업데이트를 얻을 수 없기 때문입니다.

이를 처리하기 위해, AssetAliases.ux와 같은 추가 UX 파일을 만들 수 있습니다. 예를 들어 Panel을 루트 태그로 사용할 수가 있습니다.

위의 예에서 이 비트맵은 실제로 전체 화면의 배경임을 알고 있습니다. 따라서 우리는 ActivityBackground와 같이 더 합리적인 이름을 지정하면 됩니다.

AssetAliases.ux에서 수행할 작업:

1
2
3
<Panel>
    <activity.Activity___6.Rectangle_91___Bitmap_2 ux:Class="ActivityBackground" />
</Panel>

이름을 정하려는 다른 모든 애셋은 이 리스트에 추가할 수 있습니다.

그런 다음 실제 앱 코드에서 훨씬 좋은 태그를 사용할 수 있습니다:

1
<ActivityBackground />
Was this article helpful to you? Yes No

How can we help?