프론트엔드/NextJS

AI 기능을 도입하고 싶었던 자동 사진 보정 서비스 구현 경험

홍수성찬 2025. 5. 14. 15:49

나는 사진(또는 동영상)을 찍고 그 장면의 표현력을 더 극대화하는 보정을 하는 것을 좋아한다. 이는 나의 취미 중 하나이기도 하다.

그러나, 보정은 뛰어난 감각이 있지 않는 한 매우 어렵다. 내가 표현하고 싶은 느낌으로 보정하는 게 생각보다 제대로 되지 않고, 그렇기에 전문가가 공유한 보정 파일을 사용하거나 사진작가가 참여한 보정 앱을 사용하는 경우가 생각보다 많다.

 

파일이나 앱을 사용하더라도 내가 원하는 느낌이나 사진에 알맞는 보정이 없는 경우가 발생하기도 하는데, 이럴 때마다 누군가 내가 원하는 느낌으로 보정해줬으면 좋겠다는 생각이 들기도 했다. 이 때 든 생각이 바로 '자동 사진 보정 서비스'이다. 요즘 무료로 제공하는 AI API를 활용한다면 원하는 기능을 구현할 수 있을 것이라고 생각했다.

 

계획은 좋았다

계획은 다음과 같았다.

 

  1. AI가 유명한 사진 작가들의 인스타그램, 블로그의 사진들을 읽고 이와 비슷한 느낌으로 자동 보정해준다.
  2. AI에게 원하는 스타일의 사진을 전달하여 이와 비슷한 느낌으로 자동 보정해준다.

 

기본적으로 제공하는 CSS Filter가 아닌 AI가 사진 자체를 자동으로 보정하는 것을 계획했다. 각 사진 작가들의 사진을 직접 읽고 이와 비슷한 느낌으로 사진이 보정된다면 굳이 보정 파일을 찾거나 보정 앱에서 하나씩 눌러볼 필요없이 버튼 한 번으로 쉽게 해결이 가능할 것이라고 생각했다. 그리고 이는 편리함을 제공할 것이라고 생각했다.

 

그러나, 계획과 달리, 기대와 달리 문제는 당연하게 나타났다.

 

문제 발생

계획했던 것을 구현할 수 없는 문제가 발생했다. 나는 과금 우려로 인해 무료로 사용할 수 있는 API를 활용하고자 했다. 그러나, 무료 모델의 API로는 계획했던 것들을 구현할 수 없었다. 위의 계획대로 구현하기 위해서는 유료 API를 활용해야만 했다. 계획대로는 아니지만 조금 비슷하게 구현할 수 있는 무료 API도 있었지만, 이는 사용할 수 있는 횟수(크레딧)이 극단적으로 제한되어 있었다.

 

계획대로 구현할 수 없음에 이렇게 포기해야 하나 고민하게 되었다. 그러나, 계획대로는 아니지만 흉내내는 정도로라도 구현해보고 싶었다. 그렇게 보정에 진심이었기 때문이었다.

 

비슷하게 흉내내기

계획대로 사진(이미지)을 읽을 수 없고, 그래서 원하는 대로 자동 보정 기능을 구현하기 어렵다고 해서 그냥 포기하기 보다 최대한 비슷하게라도 흉내내보자라는 생각이 들었다.

 

이 프로젝트에서 사용하고자 하는 API는 'openRouter API'로 여기서 무료 모델을 활용하려고 했다. 'HuggingFace API' 등 다른 API 들도 있었지만, 무료 크레딧 횟수가 너무나 적었고, 그래서 테스트도 제대로 할 수 없었기 때문에 'openRouter API'로 확정했다.

 

그렇다면, 사진을 읽을 수 없다면 어떤 방식이 좋을까? 고민한 결과, AI에 프롬프트로 텍스트 형식으로 요청을 해서 CSS Filter 값을 적절하게 JSON 형식으로 받아서 사용해보면 어떨까 생각이 들었다.

여기서 가장 중요한 것은 프롬프트로, 정말 자세하고 정확하게 요청해야 원하는 결과 값을 반환받을 수 있을 것 같았다.

 

const prompt = `
      당신은 이미지 색감 보정 전문가입니다. pillter_, 5gilsu, picn2k의 사진 스타일을 참고하여, ${brand} 카메라의 ${tone}한 분위기의 사진을 만들고 싶습니다.
      CSS filter로 사용할 수 있도록 아래와 같은 JSON 형식으로 필터 조정값만 반환해주세요. 설명은 포함하지 마세요.

      예시.
      {
        brightness?: number;
        contrast?: number;
        saturation?: number;
        saturate?: number;
        grayscale?: number;
        sepia?: number;
        invert?: number;
        "hue-rotate"?: number;
        opacity?: number;
        blur?: number;
      }
    `;

 

그래서 나는 우선 위 처럼 프롬프트를 작성했다. 참고할 수 있는 사진 작가를 추가하고, 카메라 브랜드와 원하는 사진 색감의 느낌에 대한 값을 전달받아서 CSS Filter 값을 JSON 형식으로 반환받도록 했다.

 

실행 결과

 

구현한 뒤, 실행을 하면 위 처럼 프롬프트 내용의 요청대로 CSS Filter 값이 JSON 형식으로 반환되어 사진(이미지)에 적용이 되었다. 보정된 결과는 솔직하게 아쉽지만, 프롬프트만 지금보다 더 정확하고, 상세하게 수정해 나간다면 최대한 비슷하게 흉내낼 수 있을 것이라는 생각이 들었다.

 

그럼에도 불구하고 아쉬운 점

최대한 비슷하게 흉내는 내고 있지만, 그럼에도 AI가 참고할만한 사진을 읽고 그에 맞는 원하는 색감으로 자동 보정되도록 하는 것을 구현할 수 없다는 게 아쉬웠다. 예전에 큰 금액은 아니였지만 예상치 못한 과금이 발생해 당황한 적이 있어 무료 API를 고집하게 됐다. 개인 프로젝트이기 때문에 더욱이 말이다.

 

무료 AI API를 사용해 위 처럼 구현하는 게 최선이었지만, 내가 발견하지 못한 이미지를 읽을 수 있는 무료 AI API가 있거나, 생긴다면 꼭 수정해서 계획대로 기능을 구현하고 싶다.