염색 팔레트 개발 고찰

안녕하세요. 아본산햄버거 입니다.

지금부터 말씀드릴 이야기는 햄버거를 좋아하는 한 프로그래머의 염색 컨텐츠 팔레트에 대한 번뇌입니다.

저도 팔레트를 이렇게 뚫어져라 보게 될 줄은 몰랐는데요. 저희 게임은 염색에 진심인 분들이 많으시잖아요?

이 문제를 처음 본 그날을 잊지 못합니다. - 가끔 꿈에 나옵니다.

기존 염색 팔레트가 모니터 해상도에 비해 크기도 작고 색상들이 자글자글하게 붙어있어서 마우스로 색상을 고르기 힘들었는데요. 마침 팔레트 개편 방안을 모집하고 있었기에 저도 여러 가지 연구를 해보았습니다.

미흡한 글이지만 재밌게 읽어주세요. 이제부터 소개해 보겠습니다. 레쮸고.

색상의 기본 개념

우선 팔레트 형태를 제안하기에 앞서 저희는 색상의 기본 개념부터 공부하고 가야 합니다. 

아무래도 제가 마비노기 염색 개발은 처음 해보는지라 색상의 기본적인 개념에 대해 잘 짚고 갔어야 했습니다. 바로 색조, 채도, 명도, 광도, 색 공간이죠.

• ●색조(Hue) : 색상의 질 또는 톤을 의미합니다. 빨강, 노랑, 파랑과 같은 색상의 기본적인 특성입니다.
  

• ●채도(Saturation) : 색상의 순수함, 강도를 나타냅니다. 채도가 높을수록 선명하고 진합니다.
  

• ●명도(Value/Brightness) : 색상의 밝기를 의미합니다. 명도가 높을수록 색이 밝고, 낮을수록 어둡습니다.
  

• ●광도(Luminosity/Lightness) : 빛의 밝기를 나타내는데, 일반적으로 색상을 흑백으로 변환해서 색상의 밝기를 나타내는 개념입니다.
  

• ●색 공간(Color space) : 색상을 수치상으로 표현한 체계인데요. RGB, HSV, CMYK 등등이 있는데 그 중 HSV와 HSL에 대해 좀 더 봐야 합니다. (뒤에서 이걸로 팔레트를 다듬어 볼 예정입니다.) 흔히 게임 그래픽에서 나오는 감마 공간과 선형 공간도 색 공간 체계라고 볼 수 있습니다.
  

• ○HSL : 색조/채도/광도로 구성. 최대 밝기를 갖는 색상은 순수한 흰색
  

• ○HSV : 색조/채도/명도로 구성. 최댓값(밝기)을 갖는 색상은 유색 물체에 흰색 빛을 비추는 것과 유사

팔레트 데이터 분석해 보기

자 다시 아이디어 제안 얘기로 돌아와서, 이제 색조, 채도, 명도, 광도에 대해 이해했으니 색상 팔레트를 표현할 방법을 찾아야 했습니다. 

저희가 인게임에서 쓰는 천, 가죽, 실크, 금속 팔레트 중 가장 자주 쓰이는 팔레트 데이터를 뽑아서 중복 컬러를 제거해 보니 약 4만 개의 색상이 나왔습니다. 하지만 저의 뇌로는 도무지 연속되지 않은 4만 개의 RGB 색상들을 어떤 형태로 표현해야 보기 좋을지 감이 오지 않았어요. 

그래서 생성형 AI의 도움을 받아보기로 합니다.

?

그렇습니다.

AI는 저에게 도움이 되지 못했습니다.😭

그래서 다시 저의 뇌로 괜찮은 팔레트를 제안하기 위해 다시 도전해 봅니다.

일단 기존의 색상 코드 데이터를 눈으로 확인할 수 있도록 이미지로 변경해 줬습니다.

(아무래도 숫자 값보다는 실제 컬러를 보면서 고민하는 게 좋으니까요.)

정방형 형태로 이미지를 만들어보니 색상 개수가 모자라서 끄트머리에 공백이 생겼습니다.

하지만 괜찮아요. 굴하지 않고 일단 진행해 봅니다.

이제 이 색상을 균형 잡힌 모습으로 만들기 위해 정렬하기로 결심하는데요.

색상 데이터 가공

우선은 색상 값 자체적으로 R, G, B 3개의 채널이 있고, 색 공간에 따라 또 다른 값을 기준으로 축을 쓸 수 있으니까… (중얼중얼)

열심히 검색해 본 결과 여러 색상 정렬 방법이 있었는데요. 저는 다음과 같은 정렬 5가지 방법을 시도합니다.

• 1.RGB 정렬 : R값, G값, B값 순서대로 오름차순
  

• 2.Hue만 이용한 정렬 : 색조 값으로 오름차순
  

• 3.HSV 정렬(HVS, SHV, SVH, VHS, VSH도) : 색조, 채도, 명도 총출동!
  

• 4.STEP 정렬 : 특수 처리한 광도값(Luminosity)을 구해서 노이즈가 없도록 전처리를 한 다음, 처리된 색조, 명도, 광도를 이용한 우선순위 정렬

  혹시 STEP 정렬이 무엇인지 궁금하실 수 있으니 수식을 적어보겠습니다. 원래 RGB 값을 이용해 루미너시티를 구하는 공식은 아래와 같습니다. Lum = 0.2126R + 0.7152G + 0.0722B 하지만 STEP 정렬에서 이를 다른 가중치와 제곱근을 통해 특수 처리한 수식을 사용하길래 저도 적용해 보았습니다. Lum = sqrt(0.241R + 0.691G + 0.068B) 그리고 노이즈를 없애기 위해 0~1 사이의 값으로 구해 온 HSV 을 0~7 사이의 값으로 변환한 후, 색조 값에 따라 명도와 광도를 반전시킨 값을 구한다고 합니다. 그 이후 색조, 광도, 명도 순으로 우선순위를 정해서 정렬합니다. 아무도 안 궁금해하셨다면… (또륵)

• 5.Hilbert 정렬 : 프랙탈처럼 소용돌이치는 선에 따라 점을 나열하고, 가지고 있는 RGB 데이터를 점의 순서대로 정렬하는 방법 (정렬이라기보다는 색상 분포 방식에 더 가까워 보였습니다.)

그래서 대망의 그 결과는…!

고장 난 TV 아닙니다.

아무래도 못 쓸 것 같죠?

그나마 STEP 정렬이 가장 그럴싸해 보이는데 그마저도 의도한 느낌은 아닙니다.

그래서 결론은… 저는 새로운 팔레트 형태를 제안드리지 못했습니다.

기존 팔레트로 확대/축소

대신 기존의 염색 팔레트의 왜곡 작업은 그대로 가져가되 조금 더 편하게 색상을 고를 수 있도록 확대 작업을 개발했는데요.

기존 색상 팔레트 크기가 작아서 그대로 확대해서 쓰기에는 흐림이 심했습니다.

그래서 왜곡 작업 이후의 색상 값을 가지고 텍스쳐 업스케일링 작업을 먼저 진행해 주었습니다.

다행히 왜곡한 색상 데이터를 인게임 텍스쳐로 뽑아내서 적용하는 작업은 이미 해뒀기에 업스케일링 후 적용하는 작업은 상대적으로 쉽게 적용되었습니다. 데이터를 연속해서 놓으면 되었으니까요.

좌 : 그냥 확대 / 우 : 업스케일링 후 확대

하지만 이 작업도 순탄하지 못했습니다.

그저 2D 좌표 계산만 잘 해주면 될 줄 알았는데 확대 축소 시 마우스 좌표가 틀어지는 문제가 발생했습니다.

제가 확대 후 축소 시 마지막으로 보고 있던 색상 위치로 마우스를 옮기는 작업을 진행했는데요.

“아니! 계산은 멀쩡한데 왜 확대 후 축소만 하면 자꾸 마우스가 엉뚱한 색 위에 있는 거야?”

하고 확인해 보니 마우스 좌표값이 글쎄 픽셀 포지션이라 정수 값이었지 뭡니까!

(사실 당연한 이야기입니다. 모니터에 표현하는 픽셀인데 소수점이 있을 리가 없었습니다.)

뭐야! 제 마우스 좌표 돌려줘요!!!

잠시 좌절의 시간이 있었지만 포기하지 않고 축소 시 발생하는 마우스 소수점 값의 오차를 보정해줍니다.

그냥 냅다 정수로 바꿔주면 소수점이 절삭 당해서 엉뚱한 색을 찾기 때문에 보정 전의 축소 마우스 좌표를 기준으로 8방향을 검사하여 선택 컬러와 후보 컬러들이 정확하게 일치하는지 확인했습니다.

그래서 확대했을 때 보고 있던 색상을 축소 상태에서도 볼 수 있도록 위치 보정 작업을 진행했습니다.

마치며…

마비노기에 멋진 팔레트를 만들어 드리기 위해 프로그래머로서 여러 방향으로 노력해 보았는데요.

염색 시스템이 다음에는 더 발전된 형태로 등장할 수 있지 않을까 생각해 봅니다.

밀레시안 여러분들이 재미있게 즐겨주셨으면 좋겠고 앞으로도 많은 관심과 응원 부탁드립니다.

부족한 글이지만 끝까지 읽어주셔서 감사합니다.