무엇이 달라졌는지, 이제는 한눈에 — REFLO의 비교 모드를 소개합니다

지난 글에서는 REFLO의 가장 밑바탕이 되는 타임라인에 대해 이야기해 드렸습니다. 오늘은 그 타임라인 위에서 꽃피는 기능, 비교 모드에 대해 자세히 소개해보려고 합니다. 왜 이 기능을 만들게 되었는지, 지금 어떤 방식으로 작동하는지, 앞으로 어떻게 발전시켜 나갈 계획인지 하나씩 풀어보겠습니다.

누구나 한 번쯤 겪어본 순간

여러 번의 수정을 거친 파일을 두고, 누군가 이렇게 물어봅니다. "이번에 정확히 뭐가 달라진 거예요?"

 

그러면 흔히 하는 일은 이렇습니다. 이전 버전 파일과 최신 버전 파일을 각각 열어서, 창 두 개를 나란히 띄워놓고 번갈아 쳐다봅니다. 눈으로 좌우를 오가며 "이 버튼 색깔이 조금 바뀐 것 같은데... 맞나?" 하고 확신 없이 짐작합니다. 로고 위치가 몇 픽셀 옮겨진 정도는 아무리 뚫어져라 봐도 잘 보이지 않습니다. 문서 파일이라면 그나마 텍스트는 '변경 내용 추적' 기능으로 확인할 수 있지만, 레이아웃이나 디자인이 바뀐 부분은 그런 기능조차 없습니다.

 

개발자들에게는 코드 한 줄 한 줄을 빨간색과 초록색으로 보여주는 '디프(diff)'라는 훌륭한 도구가 있습니다. 하지만 이미지나 디자인 파일에는 그런 게 없습니다. 결국 사람이 직접 두 화면을 눈으로 대조하며 '틀린그림찾기'를 하는 수밖에 없었습니다.

이 답답함이 비교 모드를 만들게 된 이유

지난 글에서 말씀드린 것처럼, REFLO는 먼저 '안전하게 기록되는 것'부터 해결했습니다. 타임라인 덕분에 모든 버전이 차곡차곡 쌓이기 시작했죠. 그런데 막상 만들고 나서 보니, 또 다른 문제가 남아있다는 걸 깨달았습니다.

 

버전이 아무리 잘 저장되어 있어도, 두 시점 사이에 무엇이 달라졌는지를 알아내는 건 여전히 사람 몫이었습니다. 파일을 열고, 창을 나란히 놓고, 눈을 가늘게 뜨고 비교하는 그 과정 자체는 하나도 편해지지 않은 것이었습니다. "기록은 있는데, 그 기록을 이해하는 건 여전히 힘들다"는 걸 알게 되면서, 비교 모드를 만들기 시작했습니다.

비교 모드가 추구하는 것

> "뭐가 달라졌어요?"라는 질문에, 말로 설명하는 대신 그냥 보여줄 수 있다면 어떨까? > >

비교 모드의 목적은 이 한 문장으로 요약됩니다. 변화를 설명하기 위해 애쓸 필요 없이, 눈으로 보는 순간 바로 이해되게 만드는 것. REFLO는 이를 위해 하나가 아니라 네 가지 방식을 준비했습니다. 어떤 변화는 나란히 놓고 봐야 잘 보이고, 어떤 변화는 겹쳐야 잘 보이고, 어떤 변화는 색으로 짚어줘야 잘 보이기 때문입니다.

REFLO의 네 가지 비교 모드

분할은 무료로 바로 쓸 수 있고, 오버레이·히트맵·블링크는 Pro에서 사용할 수 있습니다.

1. 분할(Split) — 나란히 놓고 보기

인테리어 리모델링 전후 사진이 잡지에 나란히 실리는 것처럼, 화면을 반으로 나누거나 비율을 조절해 두 버전을 좌우로 놓고 봅니다. 창을 두 개 띄우고 번갈아 시선을 옮기는 대신, 한 화면 안에서 눈동자만 좌우로 움직이며 비교할 수 있습니다. 전체적인 구도나 배치가 바뀌었을 때 가장 직관적으로 와닿는 방식입니다.

2. 오버레이(Overlay) — 겹쳐서 걷어보기

화장품이나 시술 광고에서 흔히 보는 '전후 비교 슬라이더'를 떠올리시면 됩니다. 두 버전을 정확히 같은 위치에 겹쳐놓고, 슬라이더를 좌우로 밀면 마치 커튼을 걷듯 한쪽 버전이 걷히면서 다른 버전이 드러납니다. 정확히 같은 지점에서 무엇이 바뀌었는지 감각적으로 느껴지는 방식이라, 미세한 위치 이동이나 색감 변화를 확인할 때 특히 유용합니다.

3. 히트맵(Heatmap) — 색으로 짚어주기

일기예보의 강수량 지도나 열화상 카메라를 떠올려보세요. 두 버전 사이에서 실제로 달라진 영역을 색으로 강조해서 보여줍니다. 전체 화면을 처음부터 끝까지 훑어볼 필요 없이, 색이 있는 곳만 보면 바로 변화된 지점을 찾을 수 있습니다. 레이어·픽셀이 많은 디자인 파일에서 "혹시 내가 놓친 변화가 있진 않을까" 싶을 때 특히 든든합니다. Word·Excel·PowerPoint 같은 문서는 시각 히트맵 대신 텍스트 비교로 따로 돕습니다.

4. 블링크(Blink, 앱에서는 깜박임) — 깜빡이며 찾아내기

어릴 때 해봤던 '틀린그림찾기' 놀이와 원리가 비슷합니다. 두 버전을 빠르게 번갈아 깜빡이듯 보여주면, 사람의 눈은 바뀌지 않은 부분은 자연스럽게 걸러내고 바뀐 부분만 유독 도드라지게 인식하게 됩니다. 나란히 놓고 봐서는 좀처럼 눈에 띄지 않는 아주 미세한 색상 톤 차이 같은 것도, 블링크(깜박임)로 보면 바로 튀어 보입니다.

타임라인 위에서 시작되는 비교

이 네 가지 비교는 모두 지난 글에서 소개해 드린 타임라인 위의 두 시점을 고르는 것에서 시작됩니다. 타임라인이 버전들을 차곡차곡 기록해두고 있기 때문에, 오늘 작업한 버전과 어제 버전을, 혹은 클라이언트에게 보내기 전과 후를 자유롭게 골라 곧바로 비교할 수 있는 것입니다. 타임라인이 '기록'을 맡고 있다면, 비교 모드는 그 기록을 '이해'로 바꿔주는 역할을 합니다.

앞으로의 계획

지금의 네 가지 모드가 모든 상황에 완벽하게 들어맞는다고 생각하지는 않습니다. 파일 형식마다 '변화'를 감지하고 보여주는 방식이 조금씩 다를 수밖에 없어서, 특히 서로 다른 포맷을 아우르며 비교 정확도를 계속 다듬어 나갈 계획입니다.

 

또한 협업 기능이 추가되면, 비교 모드의 쓰임새도 자연스럽게 넓어질 것 같습니다. 팀원 각자가 작업한 버전을 서로 비교해보거나, 여러 갈래로 나뉘었던 작업을 합치기 전에 무엇이 다른지 미리 확인하는 상황에서도 지금의 비교 모드가 중요한 역할을 하게 될 거라 생각합니다. 이 부분 역시 소수의 팀을 초대해 함께 써보며 검증한 뒤 정식으로 다듬어 나갈 계획입니다.

글을 마치며

비교 모드는 REFLO를 쓰면서 가장 "오, 이거 편하다" 싶은 순간을 만들어주는 기능이라고 생각합니다. 말로 설명하지 않아도, 그냥 보여주기만 하면 되는 것. 그게 이 기능이 하고 싶은 일입니다.

 

다음 글에서는 REFLO의 또 다른 기능들을 이어서 소개해 드리겠습니다. 읽어주셔서 감사합니다.