> ## Documentation Index
> Fetch the complete documentation index at: https://docs.parallelane.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Diff 보기

> 통합/분할 diff, 검색, 이미지 diff

ParalleLane의 diff 뷰어는 파일의 변경 내용을 보여줍니다. 통합/분할 뷰, 구문 강조, 컨텍스트 조절, diff 내 검색, 전체 복사와 이미지 비교를 지원합니다. 커밋을 열든 **워킹 카피(Working copy)** 파일을 열든 같은 뷰어가 쓰입니다.

## 뷰어 컨트롤

파일 diff 탭이 열려 있으면 콘텐츠 헤더에 diff 전용 버튼들이 나타납니다.

| 컨트롤      | 하는 일                                         |
| -------- | -------------------------------------------- |
| 뷰 전환     | 통합(unified) ↔ 분할(split) 보기 전환                |
| 전체 보기    | 변경 부분만 ↔ 파일 전체 보기 전환                         |
| 컨텍스트 −/+ | 변경 줄 위아래로 보여줄 맥락 줄 수 조절 (전체 보기에서는 비활성)       |
| 공백 변경 무시 | 공백만 바뀐 변경을 무시 (켜 두면 툴팁이 **공백 변경 표시** 로 바뀝니다) |
| 줄 바꿈     | 긴 줄을 접어서 표시 (분할 보기에서는 비활성)                   |
| 파일 히스토리  | 이 파일의 변경 이력 열기                               |

<Note>
  diff 전용 컨트롤은 실제 diff 또는 Compare 탭을 보고 있을 때만 나타납니다. 뷰 설정은 전역으로 저장되어 모든 diff 탭이 공유하고, 앱을 다시 열어도 유지됩니다.
</Note>

## 통합 뷰 vs 분할 뷰

<Tabs>
  <Tab title="통합(Unified)">
    변경을 한 컬럼에 위아래로 보여줍니다. 삭제된 줄은 빨강(−), 추가된 줄은 초록(+)으로 표시됩니다. 좁은 화면이나 작은 변경을 훑어볼 때 편합니다. 긴 줄을 접는 **줄 바꿈**은 이 뷰에서만 켤 수 있습니다.

    <Frame>
      <img src="https://mintcdn.com/railgit/1HhHpeGsA-i8McQ3/images/basics-diff-unified.png?fit=max&auto=format&n=1HhHpeGsA-i8McQ3&q=85&s=2c909d89c2b60310c0be6c75cecfb435" alt="통합 diff 뷰. 맨 위에 @@ -0,0 +1,88 @@ 헝크 헤더가 있고, 그 아래 TypeScript 새 파일의 줄들이 줄번호와 + 표시를 달고 초록 배경으로 이어진다" width="1726" height="1634" data-path="images/basics-diff-unified.png" />
    </Frame>
  </Tab>

  <Tab title="분할(Split)">
    왼쪽에 이전(old), 오른쪽에 현재(new)를 나란히 놓고 좌우로 비교합니다. 한쪽에만 있는 줄은 반대편을 빈 칸(filler)으로 채워 정렬합니다. 줄번호는 왼쪽=이전, 오른쪽=현재로 각각 하나씩 표시됩니다.

    <Frame>
      <img src="https://mintcdn.com/railgit/1HhHpeGsA-i8McQ3/images/basics-diff-split.png?fit=max&auto=format&n=1HhHpeGsA-i8McQ3&q=85&s=99c662bec3d0c1b81548d99bfaa70edf" alt="같은 파일을 분할 diff 뷰로 본 화면. 새로 추가된 파일이라 왼쪽(이전) 패널은 전부 빈 칸으로 남고, 오른쪽(현재) 패널에만 줄번호와 코드가 초록 배경으로 채워져 있다" width="1726" height="1634" data-path="images/basics-diff-split.png" />
    </Frame>
  </Tab>
</Tabs>

<Tip>
  뷰 전환은 이미 불러온 diff를 다시 그리기만 하므로 즉시 바뀝니다. 반면 컨텍스트 줄 수나 전체 보기를 바꾸면 diff를 다시 계산해 불러옵니다.
</Tip>

## 구문 강조

**설정 → ParalleLane → 디자인(Appearance)** 의 **Diff** 섹션에서 **구문 강조(Syntax highlighting)** 를 켜면 코드의 키워드, 문자열, 주석과 숫자에 언어별 색이 적용됩니다. 설정은 모든 텍스트 diff에 공통 적용되며 앱을 다시 열어도 유지됩니다.

<Frame>
  <img src="https://mintcdn.com/railgit/1HhHpeGsA-i8McQ3/images/basics-diff-highlight.png?fit=max&auto=format&n=1HhHpeGsA-i8McQ3&q=85&s=e3872fe852433005fad1a4e3ecfe0204" alt="구문 강조가 켜진 TypeScript diff의 왼쪽 위를 잘라낸 화면. 맨 위 @@ -0,0 +1,88 @@ 헝크 헤더 아래로 추가된 1~11번 줄이 보이고, export·type·const 키워드, string·number 타입, monthly-close 문자열 리터럴, 숫자 값이 각각 다른 색으로 표시된다" width="960" height="416" data-path="images/basics-diff-highlight.png" />
</Frame>

<Note>
  구문 강조는 가벼운 내장 렉서를 사용합니다. 파일 형식을 알 수 없거나 지원하지 않는 언어는 일반 텍스트로 표시되며, diff 내용 자체에는 영향을 주지 않습니다.
</Note>

## diff 안에서 검색하기

긴 diff에서 특정 내용을 찾을 수 있습니다.

<Steps>
  <Step title="검색 열기">
    diff 탭을 보고 있을 때 `Cmd`/`Ctrl` + `F` 를 누르면 오른쪽 위에 검색 바가 나타납니다. 이미 열려 있으면 같은 키로 입력란에 다시 포커스가 갑니다.
  </Step>

  <Step title="검색어 입력">
    입력하면 일치 개수(`3 / 12` 형태)가 표시됩니다.
  </Step>

  <Step title="일치 항목 이동">
    `Enter` 로 다음, `Shift` + `Enter` 로 이전 일치로 이동합니다. 바의 위/아래 화살표 버튼으로도 이동할 수 있습니다.
  </Step>

  <Step title="닫기">
    `Esc` 또는 닫기 버튼으로 검색을 닫습니다.
  </Step>
</Steps>

<Frame>
  <img src="https://mintcdn.com/railgit/1HhHpeGsA-i8McQ3/images/basics-diff-search.png?fit=max&auto=format&n=1HhHpeGsA-i8McQ3&q=85&s=92a08ba85c5a0a1fde6c4cb59bc5264b" alt="diff 오른쪽 위에 열린 검색 바. 입력란에 monthly-close가 들어 있고 오른쪽에 1 / 1 카운터와 위·아래 이동, 닫기 버튼이 있으며, 본문의 일치하는 문자열이 주황색으로 강조되고 그 행 전체가 현재 일치 항목으로 표시된다" width="1726" height="1634" data-path="images/basics-diff-search.png" />
</Frame>

## diff 전체 복사

diff 내용 전체를 클립보드로 복사할 수 있습니다.

<Steps>
  <Step title="전체 선택">
    diff에 포커스를 둔 채 `Cmd`/`Ctrl` + `A` 를 누르면 diff 전체가 선택됩니다("전체 diff가 선택됨").
  </Step>

  <Step title="복사">
    이어서 `Cmd`/`Ctrl` + `C` 를 누르면 헝크 헤더(`@@ … @@`)와 +/− 접두어가 붙은 표준 diff 텍스트로 복사됩니다.
  </Step>
</Steps>

<Note>
  화면에서 잘려 보이는 아주 긴 줄도 복사·검색에는 원본 전체가 사용됩니다.
</Note>

## 이미지 diff

이미지 파일은 코드처럼 줄 단위로 볼 수 없으므로, 전용 뷰로 전/후 이미지를 보여줍니다. `png`, `jpg`, `jpeg`, `gif`, `webp`, `bmp`, `ico` 형식을 지원합니다.

<Tabs>
  <Tab title="2-up">
    왼쪽에 이전 이미지, 오른쪽에 현재 이미지를 나란히 표시합니다. 추가된 이미지는 오른쪽만, 삭제된 이미지는 왼쪽만 보이고, 빈 쪽은 "이미지 없음" 아이콘으로 표시됩니다.
  </Tab>

  <Tab title="Swipe">
    두 이미지를 같은 위치에 겹친 뒤 세로 경계선을 드래그합니다. 경계선 왼쪽에는 이전 이미지, 오른쪽에는 현재 이미지가 보여 버튼 색이나 1px 위치 차이 같은 미세한 변경을 비교하기 좋습니다.

    <Frame>
      <img src="https://mintcdn.com/railgit/1HhHpeGsA-i8McQ3/images/basics-diff-image-swipe.png?fit=max&auto=format&n=1HhHpeGsA-i8McQ3&q=85&s=8baa004310179fc973797429bb68430f" alt="Swipe 모드로 겹쳐 놓은 앱 아이콘 두 개. 세로 경계선 왼쪽은 초록 배경(이전), 오른쪽은 파랑 배경(이후)이고 경계선 가운데에 좌우 화살표 드래그 핸들이 있다. 아래 양쪽 모서리에 Before·After 라벨과 512×512 · 14 KB 표시가 있고, 투명한 영역은 체크무늬로 나타난다" width="1726" height="1634" data-path="images/basics-diff-image-swipe.png" />
    </Frame>
  </Tab>
</Tabs>

이미지 탭의 헤더에는 텍스트 diff 컨트롤 대신 **2-up ↔ Swipe** 전환 버튼과 파일 히스토리 버튼만 표시됩니다. 선택은 파일과 세션을 넘어 유지됩니다. 각 이미지 아래에는 해상도와 파일 크기(예: `1920×1080 · 245 KB`)가 표시됩니다.

<Note>
  Swipe는 이전·현재 이미지가 모두 실제 이미지로 로드됐을 때만 동작합니다. 이미지 추가·삭제, LFS 미다운로드, 로딩 또는 오류처럼 한쪽을 겹칠 수 없으면 선택은 유지한 채 해당 파일만 2-up으로 표시됩니다.
</Note>

<Note>
  SVG는 이미지 뷰가 아니라 텍스트 diff로 표시됩니다(코드로 비교하는 편이 유용하기 때문). PDF·zip 같은 이미지가 아닌 바이너리는 "Binary file — no diff available."로 안내되고, Git LFS로 관리되는 파일은 diff 자리에 **Git LFS 객체** 카드가 떠 다운로드 상태를 보여줍니다. 카드에서 파일을 내려받는 방법과 저장소 전체를 한 번에 받는 방법은 [Git LFS](/settings/git-lfs) 문서를 참고하세요.
</Note>