2026년 6월 30일 화요일
[기술조사] SW 아키텍처 5가지 그리고 모듈러 모놀리딕+시타델 아키텍처
2026년 6월 28일 일요일
[기술조사] 저관여 상품(Low-Involvement Product) & 저관여 앱
제미나이(Gemini)에 저관여 상품과 저관여 앱에 대해서 문의하여 내용을 정리했습니다.
- 낮은 가격과 적은 리스트 : 가격이 저렴해서 잘못 사더라도 경제적/정신적 타격이 거의 없음 (껌, 생수, 볼펜 등)
- 단순 유틸리티 및 도구 : 날씨 앱, 계산기, 손전등, QR코드 스캐너, 미니 게임 등
2026년 6월 27일 토요일
[기술조사] MVP(Minimum Viable Product) 최소기능제품 ...
2026년 6월 26일 금요일
[기술조사] 웹앱(Web Applications) 개발을 위한 아키텍처
웹앱(Web Application, WebApp) 아키텍처
웹앱을 개발하고 확장하기 위해서 코드작성 전, 데이터와 요청이 어떻게 흘러가는지 구조를 설계하는 '소프트웨어 아키텍처'에 대한 이해가 필수적입니다.
그러나 생각만 하는 것보다, 일단 만들어보는 것이 더 중요한 것 같습니다. 만들고 보완하는 과정에서 아키텍처에 대한 지식을 찾아볼 기회가 있을 것입니다.
1. 3계층 아키텍처(3-Tier Architecture)
가장 기본이 되는 구조로, 웹앱의 역할을 3가지 계층으로 분리하여 관리합니다. 역할을 분리해야 서로 영향성을 최소화 할 수 있습니다.
- 프론트엔드(Presentation Tier) : 사용자가 눈으로 보고 상호작용하는 UI계층입니다. HTML, CSS, JavaScript, React 등
- 백엔드(Application Tier) : 비지니스 로직(로그인 처리, 데이터 가공, 권한 체크 등)을 담당하는 웹 서버 계층입니다. Node.js, FastAPI, Spritng Boot 등
- 데이터베이스(Data Tier) : 웹앱의 모든 데이터가 저장되는 부분입니다. PostgreSQL, MySQL, MongoDB 등
2. 서버 구조적 패턴(Structural Patterns)
서비스의 규모와 티므이 크기에 따라 백엔드 서버를 어떻게 구성할지 결정하는 패턴입니다.
- 모놀리식 아키텍처 (Monolith) : UI, 비지니스 로직, 데이터베이스 접근 코드가 하나의 거대한 프로젝트(단일 코드 베이스)에 통합되어 있는 구조, 개발 초기 속도가 매우 빠르고 배포가 단순, 서비스가 커지면 코드 간의 얽힘이 심해져(스파게티 코드) 작은 수정이 전체 시스템에 오류로 이어질 수 있습니다.
- 모듈러 모놀리식 (Modular Monolith) : 배포는 하나의 서버로 하되, 서버 내부의 코드는 철저하게 기능별로 독립된 경계를 나누어 개발하는 방식입니다. 현재 가장 가성비 좋고 트렌디한 방식입니다.
- 마이크로서비스 아키텍처 (MSA) : 거대한 서비스를 기능별로 쪼개어, 여러 개의 독립적 작은 서버들이 API를 통해 서로 통신하게 만드는 구조. 특정기능에 트래픽이 몰릴 때 그 서버만 개별적으로 늘릴수 있고, 한 서버가 죽어도 다른 서비스는 유지. 서버 간 통신제어, 데이터 동기화 등 관리해야 할 인프로 복잡도와 비용이 급격히 증가합니다.
- 서버리스 및 에지 네이티브 (Serverless & Edge-Native) : 개발자가 서버 인프라를 전혀 관리하지 않고 '코드(함수)'만 올려두면, 요청이 올 때마다 클라우드가 알아서 구동하고 트래픽에 맞춰 늘려주는 현대적인 아키텍처입니다. Cloudflare Workers, AWS Lambda 같은 환경입니다.
3. 아키텍처 적용 로드맵
처음부터 넷플릭스나 구글 같은 마이크로서비스(MSA)를 만들 필요는 전혀 없습니다. 소프트웨어 공학의 대원칙은 "가장 단순한 것부터 시작해, 문제가 생기면 확장하라" 입니다.
- 초기단계(1인개발 ~ 소규모) : 모놀리식 또는 모듈러 모놀리식 구조로 빠르게 MVP(최소 기능 제품)를 만듭니다.
- 트래픽 성장기 : 사용자가 많아지면 무거운 기능들을 하나씩 서버리스(Workers) 환경으로 분리해 나가며 아키텍처를 점진적으로 진화시키는 것이 정석입니다.
2026년 6월 23일 화요일
[기술조사] Python과 웹앱(WebApp)...
1. Python 코드는 별도 작업없이 소스코드 파일을 그대로 서버(Cloudflare)에 올리면 됩니다.
2026년 6월 21일 일요일
[기술조사] 웹앱(WebApp) UI/UX 생성을 위한 AI 도구들...
웹앱(Web Application, WebApp)을 만들기 위한 제작을 위한 AI 도구
ChatGPT, Gemini는 여러용도로 사용하고 있고, Gemini에 문의하여 특화된 AI를 찾아보았습니다.
Coding : Claude, Gemini
UI/UX : v0 by Vercel
사실, Claude, Gemini, ChatGPT는 유명합니다. 코딩을 하더라도 디자인에서 고민을 많이 하는 경우가 있는데, 심미적인 측면과 시간적인 측면에서 많은 부분을 해결해주는 AI도구들이 있다는 것을 알았습니다. 외형만 만들어 주는 것이 아닌 어느정도 동작하는 코드까지 만들어줍니다.
v0 by Vercel(브이제로 바이 버셀)을 사용해보았고, 현재 구상하고 있는 웹앱 디자인을 설명해주니 상당히 좋은 결과물이 나왔네요.
2. 디자이너 친화형 (Figma 연동 및 고품질 UI)
- 기존 디자인 워크플로우를 해치지 않으면서, 결과물을 Figma로 가져와 직접 수정하고 싶을 때 가장 좋은 툴들입니다.
2026년 6월 20일 토요일
[기술조사] BaaS (Backend as a Service)
BaaS는 웹이나 앱을 만들 때 필요한 백엔드 기능(서버 인프라, 데이터베이스, 회원가입/로그인, 파일 업로드 등)을 개발자가 직접 구축하지 않고, API 형태로 가져다 쓸 수 있도록 제공하는 클라우드 서비스입니다.
전통적인 개발 방식
- 서버 컴퓨터 구매/대여, 리눅스 OS 설치, Node.js/Java 등 백엔드 언어 설치, 데이터베이스(MySQL 등) 설치, 보안 및 방화벽 설정, 로그인/회원가입 로직 직접 코딩, 서비스 배포. (최소 수일~수주일 소요)
BaaS 방식
- 플랫폼(Firebase, Supabase 등)에 가입, 클릭 몇 번으로 DB와 로그인 기능 활성화, 프론트엔드(React, 웹앱 등)에서 제공하는 SDK 코드를 한 줄 넣어서 바로 사용. (단 몇 분 만에 완료)
BaaS의 핵심 장점
압도적인 개발 속도
- 백엔드 구축에 쓸 시간을 프론트엔드 UI/UX와 핵심 비즈니스 로직에만 집중할 수 있습니다. (초기 MVP 제품 만들 때 최적)
인프라 관리 불필요
- 서버가 터질 걱정, 보안 업데이트, 백업 등을 모두 플랫폼 사가 대신 관리해 줍니다.
비용 절감
- 대다수 BaaS는 초기 사용량이 적을 때 무료이거나 쓴 만큼만 내는 구조라 초기 자본이 거의 들지 않습니다.
Firebase vs Supabase 핵심 비교
BaaS 시장의 양대 산맥인 두 서비스는 "데이터를 저장하고 다루는 철학"에서 가장 큰 차이가 있습니다.
Firebase (구글의 NoSQL 기반 종합 선물세트)
데이터베이스
- NoSQL (Firestore) 기반입니다. 폴더 안에 서류(JSON 문서)를 자유롭게 집어넣는 구조입니다. 형태가 잡히지 않은 가벼운 데이터나 기획이 시시각각 바뀌는 프로젝트에 유리합니다.
생태계
- 단순히 DB와 로그인을 넘어 구글 애널리틱스(GA), 푸시 알림(FCM), 앱 크래시 리포트 등 모바일 앱 운영 및 마케팅에 필요한 도구까지 전부 한곳에 모여 있습니다.
특징
- 구글 시스템에 완벽히 종속(Vendor Lock-in)되지만, 그만큼 안정적이고 강력합니다. 단, 복잡한 조건의 데이터 조회(Join)가 불가능에 가깝습니다.
Supabase (오픈소스 SQL 기반의 신흥 강자)
데이터베이스
- RDBMS (PostgreSQL) 기반입니다. 엑셀이나 노션 테이블처럼 명확한 행과 열이 있는 표 형태로 데이터를 저장합니다. 유저-게시글-댓글처럼 데이터 간의 관계가 끈끈하고 복잡한 서비스에 완벽합니다.
생태계
- "오픈소스 Firebase 대체재"를 표방하며, Firebase의 핵심 기능(Auth, DB, Storage)을 그대로 벤치마킹하여 SQL 환경으로 깔끔하게 제공합니다.
특징
- 오픈소스이기 때문에 원한다면 내 컴퓨터나 독립된 서버에 직접 무료로 설치(Self-hosting)해서 쓸 수 있어 구글 종속성에서 자유롭습니다. 강력한 SQL 문법과 조인(Join) 기능을 그대로 쓸 수 있습니다.
선택사항
Firebase
- 모바일 앱(Flutter, React Native 등) 중심이거나, 푸시 알림 및 구글 로그인을 가장 쉽게 연동하고 싶을 때, 혹은 실시간 데이터 동기화(채팅 등)가 메인 기능일 때.
Supabase
- 웹 프레임워크(Next.js, React 등) 중심의 웹앱을 만들거나, 데이터의 구조가 명확하고 복잡한 쿼리가 필요할 때, 혹은 엑셀/노션처럼 직관적인 UI로 데이터를 관리하고 싶을 때.
[기술조사] SaaS(Software as a Service) & Micro-SaaS
SaaS(Software as a Service)와 Micro-SaaS는 모두 클라우드를 통해 소프트웨어를 제공하는 비즈니스 모델입니다.
1. SaaS (Software as a Service, 서비스형 소프트웨어)
인터넷을 통해 사용자가 필요한 소프트웨어를 다운로드하거나 설치하지 않고, 웹 브라우저나 앱을 통해 언제 어디서나 접근해 사용하는 서비스입니다. 대규모 자본(투자)을 유치하여 큰 규모의 팀이 개발하며, 넓은 시장(Total Addressable Market)과 다양한 기능을 타깃으로 합니다.
대표 예시 : Salesforce, Slack, Microsoft 365, Notion 등
2. Micro-SaaS (마이크로 사스)
SaaS의 '소형화' 버전입니다. 대형 SaaS가 다루지 못하거나 소홀히 하는 초틈새시장(Niche Market)의 단 하나의 명확한 문제를 해결하는 데 집중하는 소프트웨어입니다. 보통 외부 투자 없이 창업자의 자본(Bootstrapping)으로 시작하며, 1인 개발자(Solopreneur) 또는 5인 이하의 극소규모 팀이 운영합니다. 흔히 '라이프스타일 비즈니스(수익과 개인의 자유를 동시에 추구)'의 형태로 운영됩니다.
대표 예시 : 특정 플랫폼의 플러그인(예: Shopify 쇼핑몰용 특정 알림 툴, Chrome 확장 프로그램), 트위터(X) 예약 발행 전문 도구, 이메일 구독 취소 대행 서비스 등
※ Micro-SaaS 제작을 위한 조언
대기업이나 대형 스타트업이 진입하기에는 시장이 너무 작지만, 작은 매장 사장님들에게는 절실한 문제를 해결해 주는 것이 바로 Micro-SaaS의 정석이자 가장 승률이 높은 전략입니다. Micro-SaaS의 핵심은 "완벽한 제품을 만드는 데 반년을 쓰지 않고, 2~3주 만에 핵심 기능만 만들어 사용자들의 반응을 보는 것"입니다. 이를 MVP(최소 기능 제품)라고 합니다.
※ 수익화
수익화의 경우, 무조건 월 결제(구독형)만 고집할 필요는 없습니다. 특히 타깃 고객이 '지갑을 열기 부담스러워하는 개인'이거나 '하루에 한두 번 가볍게 쓰는 도구'라면 광고(애드센스, 애드몹)나 다른 수익 모델이 훨씬 효과적일 수 있습니다.
Applications (애플리케이션)
계수기 - https://lapp.microlabs.info/cnt
희석계산기 - https://lapp.microlabs.info/dilute
[Mobile Apps]
- https://play.google.com/store/apps/details?id=com.microlab.dilutecalc
[Android App] Dilution Calculator (희석계산기)
[Android Application - Dilution Calculator (희석계산기)
https://play.google.com/store/apps/details?id=com.microlab.dilutecalc
간단하게 희석용량, 희석비율 계산해주는 안드로이드 스마트폰용 애플리케이션 입니다.
[설명]
희석은 진한 농도의 액체(비료/농약 등)을 물에 타서 농도를 낮추는 것입니다.제품에 희석비율이 있는 경우, 물의 용량를 정하고 제품의 희석비를 기반으로 투입할 용량을 구합니다. 간단한 수치의 용량과 희석배율이면 암산이 되겠지만, 숫자가 복잡하거나 확인차 계산할 필요가 있습니다.
희석 계산 공식
원액의양(ml) = 총필요한액체(ml) / 희석 배수
예시 1) 1000배 희석하여 1L 희석액
- 총 필요한 액체 : 1L(1,000ml)
- 희석 배율(배수) : 1000배
- 원액 = 1000ml / 1000 = 1ml
비료(또는 농약) 1ml + 물 999ml를 혼합하여 1L 희석액이 만들수 있습니다.
예시 2) 500배 희석하여 10L 희석액
- 총 필요한 액체 : 10L(10,000ml)
- 희석 배수 : 500배
- 원액 = 10,000 / 500 = 20ml
비료(또는 농약) 20ml 넣고 나머지를 물로 채우면 됨. 그래서 10L 희석액을 만들 수 있습니다.
주의사항
희석비율(배수)
- 예) 1000배 희석
- 최종 용액 속에 원액이 몇 배로 희석되었는가를 의미 (몇 배로 묽게 만들었는가를 의미)
- 전체 1,000ml 중에 1ml 가 원액이므로 1000배 희석
- 영어표현 : 희석비율(Dilution Ratio), 희석 배수(Dilution factor)
혼합비율
- 예) 999:1
- 물 999ml + 원액 1ml 이면 혼합비율 999:1 의미, 실제 섞는 양을 말할 때 쓰임
- 영어표현 : 혼합비율(Mixing Ratio)
희석비율(배수)가 1000배 희석은 혼합 비율 999:1과 같지만 표현방식이 다름
희석 계산 공식은 비교적 간단하지만, 용어들이 혼동됩니다.
예를 들면, 희석비/희석배수/희석비율/혼합비율 등..
[기술조사] 웹앱(WebApp) 제작을 위한 환경 (입문자)
[기술조사] JavaScript 스마트폰 진동 & LocalStorage (값 저장)
Javascript 코드로 스마트폰 진동, navigator.vibrate 이용
[Source Code]
navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate; //작동되는 진동 메소드를 모두 OR 연산
navigator.vibrate(1000); //ms단위 1000 = 1초
navigator.vibrate(0); //중지
스마트폰 크롬(Chrome), 삼성 인터넷 브라우저에서 작동되었다.
Ref Link : https://blog.supersu.kr/computer/js/webpage-vibrate-javascript
2. JS(JavaScript) - LocalStorage 값을 저장/유지
브라우저에서 Key, Value 값을 저장할 수 있다.
웹 브라우저가 종료하고, 다시 실행해도 값을 유지해야 할 경우 사용할 수 있다.
window.localStorage.setItem() : Key, Value 추가 (Item 추가)
window.localStorage.getItem() : Value 읽어오기
window.localStorage.clear() : localStorage 값 삭제
위의 3개의 함수만으로, Read/Write/삭제가 가능하다. 간단한 예제를 보면, setItem()으로 값을 저장한다. 이때, Key값은 LOCAL_COUNT_NUMBER로 지정했다. getItem()으로 값을 가지고 올 수 있다. clear()을 사용하여 값을 삭제할 수 있다.
[Source Code]
window.localStorage.setItem('LOCAL_COUNT_NUMBER', vCnt);
window.localStorage.getItem('LOCAL_COUNT_NUMBER');
window.localStorage.clear();
웹브라우저가 다시 실행되거나 웹페이지 다시 읽어오면 변수가 초기화 된다.
Ref Link : https://hianna.tistory.com/697
[기술조사] JavaScript(JS)에서 소스코드 비공개 방법
JavaScript(JS)에서 소스코드 비공개 방법
* 일반적인 자바스크립트 파일(.js)이므로 브라우저에서 별도의 추가 설정 없이 아주 빠르게 실행됩니다.
