Custom 로고가 있는 Oracle APEX QR Code 플러그인 만들기

Source: Dev.to

Oracle APEX 생태계에서는 QR 코드 기능이 이미 다양한 Oracle Apex 플러그인 형태로 제공되고 있습니다. 하지만 기업 로고를 QR 코드 중앙에 삽입해 보다 전문적이고 브랜드에 맞게 보이도록 하는 등 구체적인 요구는 항상 충족되지 않습니다. 대부분의 플러그인은 이미지 커스터마이징 옵션 없이 표준 QR 코드를 생성하는 것만 지원하기 때문에, 저는 매번 애플리케이션마다 JavaScript 코드를 다시 작성하지 않고도 여러 프로젝트에서 재사용할 수 있는 자체 플러그인을 만들기로 결정했습니다.

플러그인을 직접 만드는 이유

• 로고, 크기, 색상 설정을 Page Designer에서 바로 지정할 수 있습니다.
• 높은 Error Correction Level을 지원해 로고가 가려져도 QR 코드를 읽을 수 있습니다.
• 드래그‑앤‑드롭만으로 다른 개발자도 쉽게 사용할 수 있습니다.

기술적인 과정 및 도전 과제

• 캔버스 요소에 렌더링을 지원하는 qr-code-styling 라이브러리를 사용합니다.
• 백엔드(PL/SQL)에서는 APEX Page Designer에서 입력된 속성을 JavaScript 속성으로 연결해 주는 렌더링 함수를 작성합니다.

function f_render (
    p_logo_url   in varchar2,
    p_size       in number,
    p_color      in varchar2,
    p_bgcolor    in varchar2,
    p_ec_level   in varchar2
) return varchar2 is
begin
    -- Implementasi logika yang memanggil library JavaScript
    -- dan mengembalikan HTML/JS yang diperlukan.
    return '';
end;
/

Page Designer에서 구현하기

1. Page Item을 Text Field 타입으로 만들어 QR에 사용할 데이터(예: URL 또는 텍스트)를 저장합니다.
2. QR 코드를 생성할 버튼을 추가합니다.
3. 버튼에 Dynamic Action을 만들고 Execute JavaScript Code 액션을 선택해 f_render 함수를 호출합니다.
4. 액션 유형으로 QR Code with logo를 선택합니다.
5. 다음 HTML을 포함하는 Sub Region을 추가합니다:

<!-- Tambahkan elemen canvas atau container di sini -->
<div id="qr-code-container"></div>

구성이 완료되면 로고가 포함된 QR 코드가 해당 영역에 표시됩니다.

결론

인도네시아어로 된 Oracle APEX 튜토리얼이나 문서는 아직 제한적입니다. 이 짧은 글이 APEX 기능을 확장하고 플러그인을 직접 만들고자 하는 여러분에게 도움이 되길 바랍니다.

코드 상세 내용이나 플러그인을 직접 사용해 보고 싶다면 제 레포지토리를 확인해 주세요.