본문 바로가기

Design

텍스트에 컬러스타일 먹이기 (not 오버라이드)

스케치에서 텍스트 컬러를 변경하려면 여러 방법이 있다. 나는 아래 4가지의 방법을 테스트해보았고 각 장단점을 얘기해볼 거다. 결론을 빠르게 보고 싶다면 4번 방법으로 스크롤해서 보자!

1. 컬러 피커로 컬러 지정
2. 텍스트를 심볼로 만들어 override로 컬러스타일 적용
3. 텍스트에 마스크 씌워 override로 컬러스타일 적용
4. 텍스트를 그룹으로 묶어 컬러 스타일 적용

 


 

1. 컬러 피커로 컬러 지정

1번이 기본적으로 사용하는 방법일 것이다. 하지만 나는 매번 컬러 팔레트를 불러와서 피커로 찍어야하는게 너무 귀찮았다. 일단 킵해두고 다음 테스트로 진행.

 

 

 

2. 텍스트 심볼 오버라이드

이 방법은 Apple의 UI kit에서 착안되었다. Apple의 몇몇 UI들은 들여다보면 오버라이드에서 텍스트 컬러를 변경할 수 있도록 구성되어있다. 알럿 창을 예시로 가져왔는데 하단 버튼이 그런 구조를 가지고 있었다. 브랜드 컬러를 반영하거나 버튼의 중요도를 조절할 수 있도록 저렇게 구성한 것 같다.

 

알럿의 버튼 오버라이드는 이렇게 구성되어 있다. Label은 버튼의 텍스트, Color는 텍스트의 컬러를 설정한다.
Links to는 아트보드를 연결해서 프로토타이핑을 할 수 있도록 되어있다. (Link도 오버라이드되는 걸 처음 알았다. 스케치 프로토타이핑 기능은 잘 안 쓰다 보니...)

 

조금 더 자세히 Detach를 해서 레이어를 살펴보는데 폰트와 도형이 합쳐져 있는 것을 발견했다. 왜 이렇게 했는지 한번 더 들여다보자

 

 

텍스트 레이어 위에 컬러칩을 먹인 도형을 위에 두어 Intersect 기능으로 합친 형태이다. 이렇게 하면 컬러 도형이 텍스트에 덮인 상태가 되고 레이어는 1개로 합쳐지기 때문에 그 레이어를 잡아 Appearance에서 컬러칩을 변경할 수 있다. 

하지만 불편한 점은, 심볼화를 하지 않으면 텍스트 수정을 쉽게 할 수 없다. 더블 클릭을 하면 위에 있는 도형 레이어가 잡히므로 텍스트를 수정하고 싶으면 왼쪽 레이어 리스트에서 텍스트 레이어를 잡아서 Edit 기능을 거쳐야만 가능하다. 
물론 심볼화하면 오버라이드에서 쉽게 변경 가능하지만 불필요한 심볼이 여러 개 생길 수 있는 단점이 있다. 또한 텍스트 자체가 심볼이 되면서 스마트 레이아웃을 적용할 때 까다로워진다. (텍스트와 텍스트박스 크기가 제대로 일치하지 않는다)

또 치명적인 단점은 제플린에서 폰트 스타일이 안잡힌다. 고로 이 방법은 사용하지 않기로 한다.

 

 

 

3. 마스크 오버라이드

그럼 Apple의 방식을 조금 심플하게 적용해볼까? 싶어서 폰트 위에 컬러 도형을 마스킹해보기로 했다.

 

폰트 위에 컬러칩을 먹인 도형을 마스킹했다. 그 결과가 왼쪽의 TEXT 폰트인데 보기에는 별 문제가 없는 것 같다.
하지만 충분한 여유를 주어 마스킹해도 스케치상에서 렌더링을 할 때 깨져 보이는 현상이 있었다. 또 도형의 너비를 텍스트의 너비와 일정하게 맞추어서 심볼화해야 스마트 레이아웃을 적용할 때 정상적으로 작동할 수 있다. 이걸 맞추고 정상적으로 적용되도록 세팅하는 것이 엄청 귀찮다. 그리고 치명적으로 애플 킷과 마찬가지로 제플린에서 제대로 안 잡히는 문제가 있다.

스케치 상에서 사용할 수 있더라도 제플린에서 안된다면 무용지물이므로 이 방법도 휴지통으로 보내주기로 한다.

 

 

 

4. 그룹 스타일

사실 이 글의 결론은 이 부분이다. 여러 테스트를 해보니 제일 최적의 방법인 것 같다. 방법 또한 제일 심플하다. 

 

텍스트를 그룹으로 감싼 뒤 그룹에 컬러칩을 먹이는 방식이다. 렌더링에도 문제가 없고, 사용하면서 스마트 레이아웃을 적용하는데도 큰 공수가 들지 않는다. 그룹이 많아지는 단점이 있긴 하겠다.
하지만 제플린에서 폰트 스타일과 컬러가 제대로 잡혀서 이 방법을 활용하고 있다. 일단 컬러 피커보단 훨씬 편하다.

 

결론에 비해 글이 약간 길어진 것 같지만.. 텍스트에 컬러 스타일을 입히려니 참 힘들었다는 생각도 든다.
여튼 더 좋은 방법을 찾기 전까지는 이 방법을 고수할 것 같다.