1. 텍스트 비교기가 뭔가요?

텍스트 비교기(Text Diff Tool)는 두 개의 텍스트를 비교해서 달라진 부분을 표시해주는 유용한 도구입니다. 개발자나 문서 편집자, 학생 등 다양한 사람들이 사용하며, 코드 비교나 문서 수정 확인 등에 자주 활용됩니다.

2. 필요한 기술 스택

• HTML: 기본 구조 정의
• CSS: 스타일링
• JavaScript: 비교 로직 구현

3. HTML 기본 구조 만들기

먼저, 두 개의 텍스트 입력창과 비교 버튼을 HTML로 작성합니다.

<textarea id="text1"></textarea>
<textarea id="text2"></textarea>
<button onclick="compareText()">비교하기</button>
<div id="result"></div>

4. JavaScript로 비교 로직 구현

간단하게 줄 단위로 비교하여 다른 줄을 강조하는 스크립트를 작성할 수 있습니다.

function compareText() {
  const text1 = document.getElementById('text1').value.split('\n');
  const text2 = document.getElementById('text2').value.split('\n');
  let result = '';

  const maxLines = Math.max(text1.length, text2.length);

  for (let i = 0; i < maxLines; i++) {
    const line1 = text1[i] || '';
    const line2 = text2[i] || '';

    if (line1 === line2) {
      result += '<div>' + line1 + '</div>';
    } else {
      result += '<div style="background:#ffe0e0">' + line1 + ' ≠ ' + line2 + '</div>';
    }
  }

  document.getElementById('result').innerHTML = result;
}

5. 간단한 CSS 추가

보기 좋게 입력창과 결과 창에 스타일을 추가해줍니다.

textarea {
  width: 45%;
  height: 150px;
  margin: 5px;
}
#result {
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #ccc;
}

6. 마무리

이제 간단한 텍스트 비교기가 완성되었습니다! 이처럼 HTML, CSS, JavaScript만으로도 실용적인 도구를 직접 만들 수 있습니다. 이러한 툴을 제작해보는 경험은 프론트엔드 역량을 키우는 데 큰 도움이 됩니다.