<이미지는 아래 내용과 관련이 없습니다. 그냥 멋낸다고 올린거임. ㅋ>

첵맨 CTO님께서 앱디자인시 고려되어야할 사항들을 아주 잘 정리를 해주셔서 공유합니다.

1. 포토샵, 일러스트레이터 등에서 파일 생성 시 색상 프로파일(Color Profile)은 무조건 sRGB로. 나중에 추출할때 sRGB로 변환해도 안됨. 

- 무조건 처음부터 sRGB로 해야 합니다. 그래야 정상적인 스펙의 기기에서 색상이 유사하게 나옵니다.

2. 흑백 그라데이션 금지.

- 디바이스마다 그레이스케일(흑-백까지의 범위) 에서 나타낼 수 있는 색의 절대 개수가 차이가 날 수 있어 적게 표현되는 상황에서는 과하게 층이 져 보이는 현상이 발생합니다. 이를 완화하기 위해 보통 색을 뭉개버리는(필터 적용) 방법을 사용하는데, 이것조차 완벽한 방법이 아니므로 지양해야 합니다. 

- 컬러가 있는 그라데이션의 경우는 이 현상이 좀 덜합니다. 하지만 이 경우도 아예 나타나지 않는 것은 아니므로 대단한 디자인적 가치가 있지 않는 한 가급적 하지 않는 편이 좋습니다.

3. 1픽셀 라인은 가급적 사용 안함.(직선, 곡선 모두 포함)

- 최신 기기의 1픽셀로 맞출 경우 그보다 해상도가 낮은 기기에서 표현하기 어렵기 때문에 색상이 흐려지거나 라인 자체가 소실되는 현상이 나타날 수 있습니다. 꼭 1픽셀로 가야 한다면, 기기별 1픽셀 라인이 포함된 이미지를 모두 따로 작업해야 합니다. 혹은 벡터이미지로 작업해야 합니다.

- 라인의 표현은 전체 psd 가로 길이의 1/300 정도를 맞춘다는 생각으로 작업하면 거의 모든 기기에서 동일 또는 유사하게 표현됩니다. (가로를 640으로 놓고 작업하면 2픽셀, 가로를 1080으로 놓고 작업하면 3픽셀 등)

4. 레이어 구분은 굳이 합쳐놓지만 않도록

- 작업하는 상황에서 어차피 도형 하나 올려도 레이어가 생기고 외부 이미지(일러스트레이터 작업물을 올린다던가) 할 경우에도 기본적으로 새 레이어에 올라가므로, 굳이 신경쓸 필요는 없습니다. 다만, 모든 작업을 하나의 레이어 안에서 직접 그린다던가 하는 것만 하지 않으면 됩니다.

- 여기에 영역별로 폴더 구분을 잘 해 주면 금상첨화겠지만 원래 그런 스타일이 아니라면 굳이 그렇게까지 할 필요는 없습니다.

5. 소수점 단위 배치 금지

- 포토샵은 소수점 픽셀 단위를 지원합니다. 이 경우 같은 도형을 png 등으로 추출할 때 소수점 단위로 겹친 영역이 뭉개지는 현상이 발생합니다.

6. 폰트의 볼드 옵션

- 앱내에서 이미지가 아닌 텍스트로 구현되어야 하는 서체에는 정상적인 bold 옵션을 넘어서는 엑스트라볼드나 헤비 옵션은 사용하지 않아야 합니다. 디자인 시안은 예쁜데 구현하고 보니 이상한 경우가 이런 경우입니다.

커팅시 - 

1. 커팅의 최종 이미지의 픽셀 단위는 6(또는 12)의 배수로.

- 예를 들어 16X16짜리 이미지가 있다고 가정할 경우 이미지 자체는 중앙으로 놓고 상,하,좌,우 4픽셀의 여백을 두어 최종 이미지를 24픽셀로 만듭니다. 혹은 1픽셀의 여백을 두어 18픽셀로 만듭니다.

- 이런식으로 작업을 해야 현재까지 나온 거의 대부분의 디바이스에서 픽셀 깨짐 현상을 최소화할 수 있습니다.

6배수에 대한 추가 설명:

구형 아이폰의 해상도는 320*480으로 이후 @1x 라고 부르는 해상도입니다.

아이폰4가 나올때 640*960 해상도로 정확히 두배를 늘려서 @2x라고 표현하게 됩니다.

이때부터 모바일 UI를 디자인할 때 보통 가로 640을 기준으로 두고 psd 작업을 하게 되는데, 

이에 맞춘 이미지가 홀수 단위일 경우 그 이미지 자체를 반으로 줄이는 것 자체가 불가능하고 홀수단위 이미지를 레티나 디스플레이에 그대로 올릴 경우 불필요한 이미지 프로세싱이 이루어져 전체적인 퍼포먼스를 저하하는 요소로 작용하게 됩니다.

또 삼성이 만든 ‘펜타일’ 방식 디스플레이의 경우 하나의 픽셀의 서브픽셀이 3개가 아닌 2개로 이루어져 있어 온전한 하나의 색을 표현하기 위해선 옆의 픽셀의 도움을 받아야 합니다. 결국 1픽셀 점을 표현하는데 있어 실제론 2개 이상의 픽셀이 사용된다는 것입니다.

크게 위와 같은 두가지 이유로 2의 배수로 작업하는게 일반적이었습니다만, 안드로이드의 해상도가 엄청나게 커지고 아이폰도 아이폰6+의 @3x 해상도가 생기게 되어 3의 배수로 작업해야 할 경우가 생기게 되었습니다.

결국 3의 배수와 2의 배수, 최소공배수인 6의 배수로 작업해야 최상위 모델부터 하위 사양의 기기들을 모두 커버할 수 있는 것은 물론 불필요한 연산을 줄여주게 되어 약간이나마 퍼포먼스 상승도 꾀해볼 수 있게 됩니다.

여기에 약간의 미래 지향적 발상으로 12의 배수로 작업하게 되면 @4x까지도 커버할 수 있게 되므로 12의 배수도 언급한 것이구요.

-끝