img

주감정/부감정에 따른 색상 저장하기

뮤랑이를 소개합니다 🎵😀에서 살짝 언급했듯이, 사용자의 감정 달력에 색상 저장할 때도 주감정과 부감정을 함께 활용한다. 디테일하고 정확하게 오늘의 감정을 저장하고 싶어서, 주감정이 같더라도 부감정에 따라 다른 채도/명도로 색을 저장하고 싶었다.

이를 위해 Enum 클래스인 EmotionCategory을 활용해서 감정 달력에 저장할 컬러 코드를 계산한다. (이 Enum 클래스는 DB에 저장되는 엔티티는 아니고, 감정 컬러코드를 계산하는 로직을 모아둔 클래스이다!)

각 감정별로 RGB 코드를 미리 정해두었고, 주감정/부감정에 따라 달력에 저장할 최종 컬러코드를 계산한다. 우선 각 감정별 색상은 아래와 같이 설정해두었다. 최대한 감정별 색상이 잘 드러나도록 원색 계열에 가깝도록 R,G,B 값을 설정해두었다.

img

그리고 아래처럼 감정별 컬러코드를 R,G,B로 정해두었다.

public enum EmotionCategory {

    happy(247,247, 13),
    neutral(239, 231, 218),
    surprised (245, 173, 43),
    sad(0, 176, 240),
    fearful(180, 96, 206),
    angry(227, 76, 29),
    disgusted(109, 218, 74),
    none(209, 212, 212);

    private int red;
    private int green;
    private int blue;

    EmotionCategory(int red, int green, int blue) {
        this.red = red;
        this.green = green;
        this.blue = blue;
    }
}

그리고 주감정/부감정이 오면 그 값을 계산해서 결과값 도출하게 된다. 아래는 컬러코드 계산하는 식과 결과로 나오는 색상표이다. 최종 결과 색상에서 주감정 색상이 드러나면서도 부감정에 따라 채도/명도가 다르게 나오게 하고 싶었다. 이를 위해 적절한 수치를 고민해본 결과, 주감정 컬러코드 * 0.65 + 부감정 컬러코드 * 0.35일 때 가장 주감정 색상이 드러나면서도 부감정에 따라 채도/명도만 달라지게 되었다. 최종 색상표를 보면, 그 의도가 잘 드러났던 것 같다. 예를 들어 주감정이 Happy이면 노랑 계열이지만 부감정에 따라 다른 채도/명도를 가지게 된다.

public static int calcColorCode(int main, int sub)  {
    int result = (int) (main * 0.65F + sub * 0.35F);
    return Math.min(result, 255);
}

img

참고로 Enum 클래스에는 감정별로 R,G,B 컬러 수치가 저장되지만, 최종적으로 유저의 달력에는 16진수로 저장되게 된다.

감정 계산식이나 R,G,B 컬러 수치는 중간에 변경될 수 있고, 개발자에게 의도가 명확히 보여야된다고 생각했다. RGB로 색을 표현하면, 각각 0에서 255사이의 숫자로 표현해야 하므로 (16진수 표기보다는) 개발자가 값만 보고도 대략 어느 색상이겠구나 떠올리기도 쉽고, 주감정 + 부감정 색상 계산하기도 10진수가 편했다. 그러면서도 DB에는 R,G,B 수치가 각각 따로 저장되는 것이 아닌 16진수 하나로 저장되어야 효율적일 거라 생각했다. 아래 코드의 메소드에서는 16진수의 컬러코드를 반환하게 된다.

public static String calcColorCodeByTwoEmotion(EmotionCategory mainEmotion, EmotionCategory subEmotion) {
    int calcRed =calcColorCode(mainEmotion.red, subEmotion.red);
    int calcGreen =calcColorCode(mainEmotion.green, subEmotion.green);
    int calcBlue =calcColorCode(mainEmotion.blue, subEmotion.blue);

    String redResult = String.format("%02x", calcRed);
    String greenResult = String.format("%02x", calcGreen);
    String blueResult = String.format("%02x", calcBlue);

    return redResult + greenResult + blueResult;
}

사용자 프로필 페이지에 들어가면, 아래처럼 사용자의 감정 달력을 확인해볼 수 있다.

img

  • EmotionCategory 코드 전문 링크 : https://github.com/2022-project/MU_rang_E/blob/master/src/main/java/com/example/murange/Domain/EmotionCategory.java

컬러 코드 관련 로직은 모두 Enum 클래스에 담아두었기에, 관련 기능을 수정하려면 이 클래스만 들여다보면 되니 편했다. 이전에 클린 코드를 위해 if-else 문 대신에 Enum 클래스를 활용해보았었는데, 확실히 Enum 클래스의 활용도가 정말 높은 것 같다. 더 많이 써봐서 완전 친해져야겠다. ㅎㅎ 글 참고 : if-else 대신 Enum 사용하기

여기까지가 두번째 메인 기능, 감정 달력에 색상 저장하는 기능에 대한 설명이었다. 다음 글에서는 로그인 기능, 구글 OAuth와 관련하여 정리해볼 예정이다 :)