GUI 디자이너가 저지르기 쉬운 실수 1

레티나 디스플레이의 등장으로 더 정교하고 똑 떨어지는 GUI 디자인이 요구되고 있고, 더불어 크기 변경 이슈가 자주있기 때문에 보통 Path를 기반으로 한 Rectangle Tool를 자주 사용합니다. 하지만 이 과정에서 많은 분들이 번거로워 하는 부분이 있는데 Path가 Pixel에 딱 맞아 떨어져 그려지지 않는 것입니다.


보통 이런식으로 픽셀에 딱 맞지 않고 애매하게 그려집니다.

이런 애매한 상황의 경우 보통 확대를 한 후 화살표키로 Path 한땀 한땀 위치 이동을 시켜 픽셀 정리를 하는 것을 많이 보았습니다.

이런 작업조차 하지 않는다면 아래와 같은 상황이 일어나겠죠. 좌측과 우측의 네모가 확연히 차이 납니다. Path 조정을 하지 않은 좌측 박스의 경우 경계선이 흐릿합니다. 조정을 마친 우측 박스의 경우 경계선이 또렷하죠.

레이어 스타일 조정을 통해 스타일링 작업을 하니 더 확연히 차이나는 모습입니다.

한번에 그렸을 때 아래처럼 정확히 그려지는 것이 가장 좋은 케이스겠죠.
포토샵 내부적으로 픽셀에 딱 맞아 떨어져 그려지도록 하는 옵션이 있습니다.

Rectangle Tool이 활성화 된 상태에서 상단 부분을 보면 작은 '화살표 버튼'(1)이 하나 있습니다. 그 버튼을 누르면 Tool의 옵션 사항이 나타나는데 여기서 'snap to pixel'(2)을 체크하면 그 이후로는 정확히 픽셀에 맞게 똑 떨어지는 느낌으로 그려집니다.

다른 모양을 그릴때도 여러가지 옵션이 있는데 응용 방법에 따라 얼마든지 다양한 모양을 구현해 낼 수 있습니다.