ZeroBin`s 개발일지

이미지에서 글자를 추출해야 할 때, Tesseract OCR은 가장 많이 사용되는 오픈소스 라이브러리 중 하나입니다. 이번 포스팅에서는 Spring Boot와 Tesseract를 활용해 이미지에서 글자를 추출하는 방법을 알아보겠습니다. 전체소스는 github 를 참고해 주세요.1. 특징Tesseract는 강력한 오픈소스 OCR(Optical Character Recognition) 엔진으로 다양한 특징을 가지고 있습니다. 다음은 Tesseract의 주요 특징입니다.다국어 지원 : Tesseract는 약 100여 개의 언어를 기본으로 지원하며, 한국어, 영어, 일본어 등 다국어 OCR이 가능합니다.높은 정확도 : LSTM(Long Short-Term Memory) 신경망을 활용해 텍스트 인식 정확도를 크게..

다크 모드는 화면 배경을 어둡게 하고 텍스트를 밝게 표현하는 UI 디자인의 한 유형입니다. 이는 특히 저조도 환경에서 눈의 피로를 줄이고, 에너지 절약에 도움을 줍니다. 이번 포스팅에선 다크 모드의 장점과 간단한 예제를 작성하셨습니다. 1. 다크 모드의 장점눈의 피로 감소: 밤이나 저조도 환경에서 시각적으로 더 편안합니다.배터리 절약: OLED 디스플레이에서는 어두운 픽셀이 에너지를 적게 사용합니다.모던한 느낌: 많은 사용자들이 세련되고 현대적인 UI로 인식합니다. 2. 예제2.1. index.html 다크 모드란? 다크 모드 켜기 ..

코어 웹 바이탈(Core Web Vitals)은 웹사이트의 사용자 경험을 측정하는 핵심 지표로, LCP, FID, CLS와 같은 지표를 측정하고 화면에 표시할 수 있습니다. CWV의 특징과 간단한 예제를 소개하겠습니다.1. CWV 특징Core Web Vitals는 다음의 세 가지 주요 지표를 포함합니다.LCP (Largest Contentful Paint):페이지에서 가장 큰 콘텐츠가 로드되는 시간입니다.페이지 로딩의 '시각적' 측면을 측정하며, 페이지가 로드되는 동안 가장 중요한 콘텐츠가 사용자에게 보이는 속도를 나타냅니다.좋은 점수: 2.5초 이하주요 목표: 페이지가 빠르게 로드되어 사용자가 빠르게 주요 콘텐츠를 볼 수 있도록 하는 것입니다.FID (First Input Delay):사용자가 페이지에..

모놀리식(Monolithic)에서 마이크로서비스(Microservices) 로이 전환 배경과 방법을 간단한 예제를 통해 알아보겠습니다.  1. 변화 배경모놀리식 아키텍처하나의 코드베이스로 모든 기능(사용자 관리, 결제, 주문 등)을 구현하는 방식. 배포 및 유지보수가 단순하지만, 규모가 커질수록 코드 복잡성 증가와 확장성 문제 발생.마이크로서비스 아키텍처각 기능(서비스)을 독립된 작은 서비스로 나누는 방식. 서비스 간 느슨한 결합과 독립적 배포가 가능하며, 클라우드 환경에서 확장성과 신뢰성을 높일 수 있음. 2. 비교항목모놀리식마이크로서비스배포전체 애플리케이션 한 번에 배포각 서비스 독립적으로 배포 가능확장성전체 시스템을 확장해야 함필요한 서비스만 개별 확장 가능기술 스택단일 기술 사용각 서비스별 다양한..

스벨트(Svelte)는 현대적인 웹 애플리케이션을 구축하기 위한 프론트엔드 프레임워크로, 2020년 이후 빠르게 주목받고 있는 기술입니다. Angular, React, Vue.js 같은 기존 프레임워크들과는 다른 철학과 작동 방식을 갖고 있습니다.스벨트는 "컴파일러 기반 프레임워크"라는 독특한 방식으로 작동합니다. 즉, 개발자가 작성한 코드를 브라우저에서 실행하기 전에, 더 작은 규모의 고성능 JavaScript로 변환하여 제공하는 것이 특징입니다. 스벨트의 주요 특징과 간단한 예제를 소개하겠습니다. 1. 스벨트의 주요 특징컴파일러 기반 스벨트는 런타임 없이 코드를 빌드 타임에 컴파일합니다.결과적으로 앱 크기가 작아지고 성능이 향상됩니다. 브라우저가 불필요한 작업을 하지 않도록 미리 최적화된 JavaSc..

시네마틱 스크롤링(Cinematic Scrolling)은 웹 페이지에서 스크롤을 통해 시각적 연출이 이루어지는 기법입니다. 주로 이미지, 텍스트 애니메이션, 시차 효과(parallax scrolling), 비디오 전환 등이 포함되며, 사용자가 마치 영화를 감상하는 듯한 경험을 하도록 도와줍니다. 특히, 브랜드 소개 페이지나 포트폴리오에 적합하며, 시각적 몰입감을 높여 사용자의 흥미를 유발하는 데 유리합니다. 주요 특징과 간단한 예제를 소개하겠습니다. 1. 시네마틱 스크롤링 특징인터랙티브 경험 제공: 스크롤에 따라 페이지 요소가 움직이고 변하면서 사용자의 참여를 유도합니다.시차 스크롤링: 배경 이미지와 전경 이미지가 다른 속도로 움직이며 입체감과 깊이감을 줍니다.스토리텔링에 적합: 특정 스토리를 순차적으로..

JAM 스택(JAM Stack)은 JavaScript, API, 그리고 Markup의 조합을 통해 빠르고, 안전하며, 확장 가능한 웹 애플리케이션을 만드는 현대적인 아키텍처입니다. 기존 서버 중심의 웹사이트와 달리, JAM 스택은 정적 파일을 기반으로 하여 클라이언트와 서버 간의 분리를 통해 성능과 보안을 강화합니다. JAM 스택의 주요 특징과 간단한 예제를 소개하겠습니다. 1. JAM 스택의 특징JavaScriptJAM 스택 애플리케이션의 동작을 담당하는 클라이언트 측 로직을 JavaScript로 처리합니다. React, Vue, Svelte와 같은 프레임워크를 통해 사용자와의 상호작용을 구현할 수 있습니다.API서버에서 필요한 데이터를 가져올 때 API를 통해 서버에 의존하지 않고 데이터를 처리합니다..

TensorFlow.js는 브라우저 및 Node.js에서 머신러닝 모델을 개발하고 실행할 수 있는 JavaScript 라이브러리입니다. TFJS의 주요 특징과 간단한 예제( "손글씨 숫자 인식" )를 통해 알아보겠습니다. 1. TFJS의 주요 특징브라우저 기반 실행: 클라이언트 사이드에서 직접 모델을 학습하고 예측할 수 있습니다.모델 변환: 기존 TensorFlow 모델을 TensorFlow.js 형식으로 변환하여 웹에서 실행 가능.빠른 프로토타이핑: 웹 애플리케이션에서 손쉽게 머신러닝 기능을 구현할 수 있습니다. 2. 손글씨 숫자 인식https://github.com/google/tfjs-mnist-workshop/tree/master/model위 경로에서 "group1-shard1of1" 과 "mod..

Tailwind CSS는 유틸리티 퍼스트(Utility-First) CSS 프레임워크로, 미리 정의된 클래스들만으로 빠르게 스타일링할 수 있도록 설계되었습니다. 컴포넌트 기반이 아닌, 스타일 속성 자체에 집중한 독특한 접근 방식을 사용하여 빠르고 일관된 디자인을 구현할 수 있는 것이 특징입니다. 이번 포스팅에선 Tailwind CSS의 주요 특징과 간단한 예제로 사용방법에 대해 알아보겠습니다. 1. Tailwind CSS의 주요 특징유틸리티 클래스 기반 스타일링Tailwind는 미리 정의된 CSS 클래스들(예: bg-blue-500, text-lg, p-4)을 조합하여 요소를 스타일링합니다.유틸리티 클래스는 재사용 가능한 단일 속성들로 이루어져, CSS 파일을 별도로 작성할 필요 없이 HTML 안에서 직..