📱 Web NFC API 완벽 가이드: 브라우저에서 NFC 태그를 직접 읽고 쓰는 차세대 웹 IoT

<!-- iframe 내부에서 Web NFC를 허용할 때 사용 -->
<iframe src="https://partner-system.com/nfc-reader" allow="nfc"></iframe>

// Web NFC 지원 여부 확인
if (!('NDEFReader' in window)) {
  console.warn('이 브라우저는 Web NFC API를 지원하지 않습니다.');
}

async function startNFCScan() {
  try {
    const ndef = new NDEFReader();
    
    // 스캔 취소를 위한 AbortController 준비
    const controller = new AbortController();
    
    // 1. NFC 태그 스캔 세션 시작 (권한 팝업이 노출될 수 있음)
    await ndef.scan({ signal: controller.signal });
    console.log('NFC 태그 스캔이 시작되었습니다. 태그를 스마트폰 뒤에 대주세요.');

    // 2. 태그 읽기 오류 처리
    ndef.addEventListener('readingerror', () => {
      console.error('NFC 태그를 읽는 중 오류가 발생했습니다. 태그가 손상되었거나 손이 흔들렸습니다.');
    });

    // 3. 태그 감지 및 데이터 수신
    ndef.addEventListener('reading', ({ message, serialNumber }) => {
      console.log(`✅ 태그 감지 성공! Serial Number: ${serialNumber}`);
      console.log(`NDEF 레코드 개수: ${message.records.length}`);
      
      for (const record of message.records) {
        console.log(`레코드 타입: ${record.recordType}`);
        console.log(`MIME 타입: ${record.mediaType}`);
      }
    });

  } catch (error) {
    if (error.name === 'NotAllowedError') {
      console.error('사용자가 NFC 접근 권한을 거부했습니다.');
    } else {
      console.error(`NFC 스캔 시작 실패: ${error.message}`);
    }
  }
}

function parseTextRecord(record) {
  const textDecoder = new TextDecoder(record.encoding || 'utf-8');
  const decodedText = textDecoder.decode(record.data);
  console.log(`[Text Record] 언어: ${record.lang}, 내용: ${decodedText}`);
  return decodedText;
}

function parseUrlRecord(record) {
  const textDecoder = new TextDecoder();
  const url = textDecoder.decode(record.data);
  console.log(`[URL Record] 접속 URL: ${url}`);
  return url;
}

function parseMimeRecord(record) {
  if (record.mediaType === 'application/json') {
    const textDecoder = new TextDecoder();
    const jsonString = textDecoder.decode(record.data);
    const jsonObject = JSON.parse(jsonString);
    console.log('[MIME JSON Record]', jsonObject);
    return jsonObject;
  }
  return record.data;
}

function parseRecord(record) {
  switch (record.recordType) {
    case 'text':
      return parseTextRecord(record);
    case 'url':
      return parseUrlRecord(record);
    case 'mime':
      return parseMimeRecord(record);
    default:
      if (record.recordType.includes(':')) {
        console.log(`커스텀 외부 데이터 타입: ${record.recordType}`);
        const decoder = new TextDecoder();
        return decoder.decode(record.data);
      }
      return 'Unknown Record';
  }
}

async function writeToNFCTag() {
  const ndef = new NDEFReader();
  
  try {
    // 쓰기 모드 시작 (태그를 가져다 대면 데이터 기록)
    await ndef.write({
      records: [
        // 1. 텍스트 레코드 추가
        { recordType: 'text', data: '로직팬텀 물류 관리 자재 번호: #98421' },
        
        // 2. URL 레코드 추가
        { recordType: 'url', data: 'https://logic-phantom.tech/inventory/98421' },
        
        // 3. JSON 데이터 (MIME 타입) 추가
        {
          recordType: 'mime',
          mediaType: 'application/json',
          data: new TextEncoder().encode(JSON.stringify({
            itemId: 98421,
            owner: 'Logic-Phantom',
            updatedAt: new Date().toISOString()
          }))
        }
      ]
    }, {
      overwrite: true // 기존 데이터를 덮어쓸지 여부 (기본값 true)
    });
    
    console.log('✨ NFC 태그에 데이터가 성공적으로 기록되었습니다!');
  } catch (error) {
    console.error(`NFC 데이터 기록 실패: ${error.message}`);
  }
}

async function makeTagFinalReadOnly() {
  const ndef = new NDEFReader();
  
  try {
    console.log('잠글 NFC 태그를 스마트폰에 접촉하세요...');
    
    // makeReadOnly() 호출 후 태그 접촉 대기
    await ndef.makeReadOnly();
    
    console.log('🔒 NFC 태그가 성공적으로 읽기 전용으로 잠겼습니다. 더 이상 수정할 수 없습니다.');
  } catch (error) {
    console.error(`읽기 전용 잠금 실패: ${error.message}`);
  }
}

class WebNFCManager {
  constructor() {
    this.reader = null;
    this.abortController = null;
    this.isScanning = false;
  }

  // Web NFC 지원 여부 점검
  static isSupported() {
    return 'NDEFReader' in window;
  }

  // NFC 태그 스캔 시작
  async startScanning(onTagDiscovered, onError) {
    if (!WebNFCManager.isSupported()) {
      throw new Error('이 브라우저는 Web NFC를 지원하지 않습니다.');
    }

    this.reader = new NDEFReader();
    this.abortController = new AbortController();

    try {
      await this.reader.scan({ signal: this.abortController.signal });
      this.isScanning = true;

      this.reader.addEventListener('readingerror', (evt) => {
        if (onError) onError(new Error('NFC 태그 읽기 에러 발생'));
      });

      this.reader.addEventListener('reading', ({ message, serialNumber }) => {
        const parsedRecords = message.records.map((rec) => this.parseRecord(rec));
        onTagDiscovered({
          serialNumber,
          records: parsedRecords,
          timestamp: new Date()
        });
      });
    } catch (err) {
      this.isScanning = false;
      throw err;
    }
  }

  // NFC 스캔 중단
  stopScanning() {
    if (this.abortController) {
      this.abortController.abort();
      this.isScanning = false;
      console.log('NFC 스캔 세션이 중단되었습니다.');
    }
  }

  // 태그에 새로운 데이터 쓰기
  async writeProductTag(productId, productName) {
    if (!WebNFCManager.isSupported()) return;

    const writer = new NDEFReader();
    const payload = {
      recordType: 'mime',
      mediaType: 'application/json',
      data: new TextEncoder().encode(JSON.stringify({
        id: productId,
        name: productName,
        createdAt: Date.now()
      }))
    };

    await writer.write({ records: [payload] });
  }

  // 레코드 디코더 유틸리티
  parseRecord(record) {
    const textDecoder = new TextDecoder(record.encoding || 'utf-8');
    const rawString = textDecoder.decode(record.data);

    if (record.recordType === 'mime' && record.mediaType === 'application/json') {
      try {
        return { type: 'json', payload: JSON.parse(rawString) };
      } catch (e) {
        return { type: 'mime', payload: rawString };
      }
    }

    return {
      type: record.recordType,
      payload: rawString
    };
  }
}

// 사용 예시
const nfcManager = new WebNFCManager();

document.getElementById('btn-scan').addEventListener('click', async () => {
  try {
    await nfcManager.startScanning(
      (tagData) => {
        alert(`[태그 인식] 시리얼: ${tagData.serialNumber}\n내용: ${JSON.stringify(tagData.records)}`);
      },
      (err) => console.error(err)
    );
  } catch (err) {
    console.error('스캔 실패:', err);
  }
});