어쩌다보니 iOS 개발자

클로저와 렉시컬 스코프란?

엔디엘(no Dream no Life) — Fri, 13 Feb 2026 12:26:09 +0900

1) 스코프와 “외부 스코프”

스코프(scope): 변수를 “어디서 접근할 수 있는지”의 범위
외부 스코프(outer scope): 지금 함수 기준으로 바깥에 있는 스코프

function outer() {
  let x = 10;
  function inner() {
    console.log(x); // inner 입장에선 x가 "외부 스코프 변수"
  }
}

2) 렉시컬 스코프(Lexical Scope)란?

한 줄로:

함수의 스코프(외부 변수 참조 기준)는 “호출 위치”가 아니라 “작성 위치”로 결정된다.

예시:

let a = "global";

function test() {
  console.log(a);
}

function run() {
  let a = "run";
  test();
}

run(); // "global"

왜 "run"이 아니라 "global"?

test는 전역에서 작성됨
그래서 test가 변수를 찾을 때 기준이 되는 바깥은 전역 스코프로 “고정”
호출을 run에서 했든 어디서 했든 상관 없음
→ 이 규칙이 렉시컬 스코프

3) 클로저(Closure)란?

클로저는 “특별한 문법”이 아니라 현상/특성이야.

한 줄 정의:

함수가 자신이 작성된 위치의 “외부 스코프(렉시컬 환경)”를 기억(참조 유지)해서, 나중에도 그 변수에 접근할 수 있는 것.

핵심은 함수 자체를 기억한다가 아니라

✅ 그 함수가 만들어질 당시의 “변수 환경(렉시컬 환경)”을 참조한다는 점.

4) 클로저 원리(왜 outer가 끝났는데 변수는 살아있나)

대표 예:

function outer() {
  let x = 10;

  return function inner() {
    console.log(x);
  };
}

const f = outer();
f(); // 10

여기서 일어나는 일:

outer() 실행 → x=10이 들어있는 “환경(렉시컬 환경)” 생성
inner 함수 생성
- 이때 inner는 내부적으로 [[Environment]] 같은 슬롯에
- “내가 작성된 위치의 바깥 환경(outer의 환경)”을 참조로 저장
outer 실행이 끝나도
- inner가 그 환경을 계속 참조하고 있으니
- GC가 지우지 못함
그래서 f() (= inner 호출) 시에도 x를 찾을 수 있음

즉:

“함수(inner)가 외부 환경을 참조하고 있어서 그 환경이 살아남는 것”

(outer 함수를 붙잡는 게 아님)

5) f1 / f2 예시가 말해주는 핵심

function outer() {
  let x = 0;
  return function () {
    x++;
    console.log(x);
  };
}

const f1 = outer();
const f2 = outer();

f1(); // 1
f1(); // 2
f2(); // 1

왜 f2는 1부터 시작해?

outer()는 호출될 때마다 새 렉시컬 환경을 만든다
f1은 환경 A의 x를, f2는 환경 B의 x를 잡고 있음
→ 값이 같아 보여도 “서로 다른 변수 공간”을 잡고 있는 거야

6) 왜 클로저를 사용하는가?

클로저는 실전에서 엄청 많이 쓰여.

(1) 상태 유지 (state 유지)

function makeCounter() {
  let c = 0;
  return () => ++c;
}
const counter = makeCounter();
counter(); // 1
counter(); // 2

함수 호출이 끝나도 c가 유지됨.

(2) 데이터 은닉(캡슐화, private 변수)

function createUser() {
  let password = "secret";
  return {
    check(p) { return p === password; }
  };
}

외부에서 password 직접 접근 불가.

(3) 함수 팩토리(설정값 고정한 함수 만들기)

const multiply = x => y => x * y;
const double = multiply(2);
double(5); // 10

(4) 콜백/비동기에서 값 보존

이벤트 핸들러, setTimeout, Promise 콜백 등에서 “그때의 문맥”을 유지.

7) 렉시컬 스코프 ↔ 클로저 관계 한 문장

렉시컬 스코프는 “바깥이 누구인지(작성 위치 기준)”를 고정하는 규칙이고,

그 고정된 바깥 환경을 함수가 계속 참조해서 살아남는 현상이 클로저다.

렉시컬 스코프(규칙) 때문에
함수는 “작성된 위치의 외부 환경”을 기준으로 변수를 찾고
그 환경 참조가 남아 있으면
→ 클로저가 된다

8) React Native/React에서 특히 중요한 이유(짧게)

RN은 JS Thread가 바쁘면 UI도 영향을 받음
클로저는 많이 쓰이지만 stale closure(오래된 상태를 캡처) 같은 버그가 생기기 쉬움
(예: useEffect, setTimeout 콜백에서 과거 state를 보는 문제)

Event Loop(이벤트 루프) 완전 정리

엔디엘(no Dream no Life) — Fri, 13 Feb 2026 11:49:31 +0900

✅ 결론부터

자바스크립트는 싱글 스레드이며,

이벤트 루프는 Call Stack이 비었을 때 대기 중인 작업을 실행하도록 조정하는 반복 제어 메커니즘이다.

비동기 작업은 JS 밖에서 병렬로 수행될 수 있지만, JS 코드 실행은 항상 단일 스레드에서 순차적으로 이루어진다.

그렇다면 왜 이벤트 루프를 알아야 할까?

비동기 실행 순서를 예측하고, 실제 버그를 해결하기 위해서다.

1️⃣ 실행 순서를 정확히 예측하기 위해

setTimeout(() => console.log("A"), 0);
Promise.resolve().then(() => console.log("B"));

왜 B가 먼저 실행될까?

이벤트 루프를 모르면 “그냥 그렇다”가 된다.

이벤트 루프를 이해하면:

Microtask → Task 순서 때문이라고 설명할 수 있다.

2️⃣ UI 멈춤(블로킹)을 이해하기 위해

while (true) {}

이 코드 한 줄이면:

버튼 클릭 안 됨
애니메이션 멈춤
Promise 실행 안 됨
setTimeout 실행 안 됨

이유는 간단하다.

Call Stack이 비지 않으면 이벤트 루프가 돌지 못하기 때문이다.

React Native에서도 JS Thread가 막히면 UI가 끊긴다.

이걸 이해하려면 이벤트 루프를 알아야 한다.

3️⃣ async / await를 제대로 이해하기 위해

await something();
console.log("done");

await는 코드를 멈추는 것이 아니라

나머지를 Microtask로 넘기는 것이다.

이걸 이해하면:

왜 await 이후 코드가 나중에 실행되는지
왜 병렬 처리를 위해 Promise.all이 필요한지
왜 루프 안에서 await를 쓰면 느려지는지

를 설명할 수 있다.

4️⃣ React / React Native 동작을 이해하기 위해

상태가 왜 바로 반영되지 않는가?
왜 setTimeout(0)이 완전히 즉시 실행되지 않는가?
왜 JS 연산이 길어지면 화면이 끊기는가?

이 모든 질문의 근본에는 이벤트 루프가 있다.

최종 정리

이벤트 루프를 이해한다는 것은

자바스크립트의 실행 모델을 이해하는 것이다.

그 결과:

실행 순서를 예측할 수 있고
비동기 버그를 줄일 수 있고
UI 블로킹을 방지할 수 있으며
프레임워크 동작을 이해할 수 있다

원하면 글 전체를 더 다듬어서

“입문자용 부드러운 설명 스타일”

“기술 블로그 느낌의 구조적 설명 스타일”

“면접 대비용 압축형 글”

중 하나로 톤을 맞춰서 완성본 만들어줄까요?

1. 자바스크립트는 싱글 스레드다

자바스크립트 엔진은 Call Stack 하나만 가진다.

console.log("A");
console.log("B");

이 코드는 절대 동시에 실행될 수 없다.

항상 A → B 순서로 실행된다.

2. 그런데 어떻게 비동기가 가능한가?

핵심은 이것이다:

JS 코드 실행은 싱글 스레드지만,

비동기 작업은 JS 밖에서 처리된다.

예를 들어:

setTimeout → 브라우저/네이티브 타이머
fetch → 네트워크 스택
파일 I/O → OS 레벨 처리

이 작업들은 JS 스레드가 아니라 **런타임 환경(브라우저/네이티브)**에서 병렬로 처리된다.

작업이 끝나면:

콜백이 Queue에 등록됨
이벤트 루프가 Call Stack이 비었을 때 실행

3. 이벤트 루프란 무엇인가?

이벤트 루프는 “공간”이 아니라 로직이다.

개념적으로는 다음과 같다:

while (프로그램이 살아있는 동안) {
  if (CallStack이 비어있으면) {
    Microtask 전부 실행
    Task 하나 실행
  }
}

즉,

대기 중인 작업을 언제 실행할지 결정하는 반복 제어 메커니즘

4. Call Stack / Microtask / Task 차이

Call Stack

현재 실행 중인 코드
JS는 한 번에 하나만 실행

Microtask Queue

Promise.then
async/await 이후 코드
queueMicrotask

특징:

Call Stack이 비면 전부 실행

Task Queue (Macrotask)

setTimeout
setInterval
I/O
이벤트 핸들러

특징:

한 번에 하나만 실행

5. 실행 순서의 핵심 규칙

이벤트 루프의 핵심 규칙:

동기 코드 실행
→ Microtask 전부 실행
→ Task 하나 실행
→ 반복

예시:

console.log("1");

setTimeout(() => console.log("2"), 0);

Promise.resolve().then(() => console.log("3"));

console.log("4");

출력 결과:

이유:

동기: 1, 4
Microtask: 3
Task: 2

6. async / await는 무엇을 하는가?

await는 실행을 멈추는 것이 아니라,

나머지 코드를 Microtask로 넘기는 문법적 설탕(syntax sugar)

예시:

async function test() {
  console.log("1");
  await Promise.resolve();
  console.log("2");
}

test();
console.log("3");

출력:

1
3
2

await 뒤는 항상 Microtask에서 실행된다.

7. 그렇다면 비동기는 진짜 비동기인가?

정확한 표현은 이렇다:

작업 수행은 병렬일 수 있다.

JS 코드 실행은 절대 병렬이 아니다.

예를 들어 fetch는 병렬로 네트워크 요청을 수행하지만,

콜백 실행은 JS 스레드에서 순차적으로 이루어진다.

8. React Native 기준으로 보면

React Native도 기본적으로 JS Thread 하나에서 동작한다.

구조는 다음과 같다:

JS Thread
↑
이벤트 루프
↑
Native Modules / OS / Network

네트워크 요청 → 네이티브에서 병렬 처리
완료 → JS Queue에 등록
JS Thread가 순차 실행

그래서:

JS에서 무거운 연산을 하면 UI가 멈춘다
타이머도 지연된다
Promise도 대기한다

왜냐하면 JS Thread는 하나뿐이기 때문이다.

호이스팅을 알아야 하는 이유는??

엔디엘(no Dream no Life) — Fri, 13 Feb 2026 10:25:36 +0900

최종 결론

호이스팅을 알아야 하는 이유는 호이스팅으로 인해 의도 하지 않는 버그가 발생되는 걸 막기 위해서입니다.

실무에서는 호이스팅에 절대 의존하지 마세요!
- ❌ var, function 선언식 사용 금지
- ✅ const/let + 함수 표현식/화살표함수 + "위 선언, 아래 사용"

ESLint로 방지

{
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  rules: {
      // 호이스팅 방지 규칙
      "@typescript-eslint/no-use-before-define": [
        "error",
        {
          functions: true,
          classes: true,
          variables: false,
          typedefs: true,
        },
      ],
      "no-var": "error", // var 키워드 사용 금지
      "prefer-const": "error", // 재할당하지 않는 변수는 const 사용 강제
      "func-style": ["error", "expression", { allowArrowFunctions: true }], // arrow function 사용 강제
    },
}

1. 왜 이런 결론인가? → var의 치명적 문제

// 조용한 런타임 버그의 시작
console.log(user.name);  // undefined.name → TypeError (프로덕션!)
var user = await fetchUser();

var는 선언 전에 undefined를 줘서 에러 없이 잘못된 로직이 진행됨

즉 런타임 에러!!

2. let/const는 안전장치지만 여전히 문제

console.log(x);  // ReferenceError (개발중 잡힘)
let x = 10;

호이스팅에 의존하려 하면 TDZ 에러 → 결국 순서 지켜야 함

3. 함수 선언식도 혼란만 줌

sayHello();  // 어디서 정의됐지? 언제 덮어쓰였지?
function sayHello() { console.log('hello'); }

호이스팅 때문에 코드 순서가 뒤죽박죽 → 가독성 최악

4. 그래서 나온 실무 표준

❌ 피할 것	✅ 권장 패턴
var x = 0	const x = 0
function foo() {}	const foo = () => {}
아래 선언 위 사용	TOP 선언 BOTTOM 사용

5. React Native 실제 동작

// Metro bundler가 전체 파일 분석 (호이스팅 아님!)
const styles = StyleSheet.create({...});  // TOP 선언
<View style={styles.container} />         // 안전 사용

한 줄 비유

호이스팅 = 호이스팅을 이해하여 의도하지 않는 버그가 발생되는 걸 막자
       ≠ "개발 편의를 위한 기능"

실무에서의 한계점(리스크)

lint에서 variables를 false로 설정을 했는데 사실 이것도 true로 해야지 호이스팅으로 생기는 버그를 미연에 방지할 수 있을 것이다. 하지만 실제로 나는 스크린 컴포넌트 기준으로

import

변수선언, useState, hook, 상수선언 등

라이프사이클 커스텀 hook
함수

이런 순으로 코드가 읽히는걸 선호한다. 여기서 variables가 true가 되면 생기는 문제는 라이플사이클 커스텀 hook인데, 스크린 컴포넌트에서는 나는 라이프 싸이클 공통화 할 수 있는 커스텀 훅을 항상 필수로 사용하고 있다.

// 2. 라이프사이클 관리
  useScreenLifecycle({
    firstFocus: () => {
      // 컴포넌트 마운트 시 탭 인증 값 체크 (한 번만 실행)
    },
    focus: () => {
      // 화면 재포커스 시 로직 (필요시)
    },
    blur: () => {
      // 화면 포커스 잃을 때 로직 (필요시)
    },
    unmount: () => {
      // 컴포넌트 언마운트 시 정리 작업
    },
  });

하지만 이걸 사용하기 위해서는 아래에서 선언되는 함수를 호출해야 하기 때문에 문제가 생긴다. 결국 코드 흐름이 더 중요하다고 판단하였으며, 이 부분은 허용하기로 하였다.

React-Native 프로젝트 그린필드 리팩토링 시작 - 기존 앱 분석

엔디엘(no Dream no Life) — Wed, 25 Jun 2025 15:14:39 +0900

안녕하세요. 엔디엘입니다.

갑자기 왜 iOS -> Android로 작업하다가 이걸 하나 ㅎㅎ 궁금해 하실분은 아무도 안계시겠지만..

현재 직장 대표님에게 사실대로 말씀드리고 육아휴직을 신청하여 이직을 준비하고 있었지만... 사실 육아휴직 비용으로

저희 가족이 생활하기에는 너무 부족하더라구요. 그래서 육아휴직중에도 월 150만원 이상만 넘지 않는다면 괜찮다고 하여.. 우연한 계기로.. 프리랜서를 하게되었습니다.!!

어떤 앱인지는 말씀드리지 못하겠지만 기존에 많은 인도 개발자들이 손을 건너왔다고합니다..

듣기로는 빌드도 안되고 배포한건 안드로이드 최소버전 조건이 안맞아서 안되고.. 현재 출시된 버전은 이것저것 할때마다 앱은 죽고.. 다른 개발자가 맡다가 그냥.... 안한다고 하셨다고 하더라구요..

일단 제가 눈으로 하나하나 파악하는것 보다는 Cluade에게 분석 요청을 했습니다.

~~~~~~ 프로젝트 분석 결과

️ 기본 정보

앱명: ~~~~~
버전: ~~~
React Native 버전: 0.70.9
TypeScript: 부분 적용 (4.3.2)

프로젝트 아키텍처

클린 아키텍처 패턴 적용

src/
├── components/     # 재사용 가능한 UI 컴포넌트
├── screens/       # 화면별 컴포넌트
├── containers/    # 비즈니스 로직이 포함된 컴포넌트
├── navigation/    # 네비게이션 설정
├── reduxs/        # 상태관리 (Redux + Redux-Saga)
├── services/      # API 통신
├── utils/         # 유틸리티 함수
├── assets/        # 이미지, 폰트 등 정적 자원
├── i18n/          # 다국어 지원
├── configs/       # 환경설정
└── constants/     # 상수 정의

주요 기술 스택

상태 관리

Redux + Redux-Saga + Redux-Persist
ReduxSauce (액션/리듀서 생성 헬퍼)
AsyncStorage & Keychain을 통한 데이터 영속화

네비게이션

React Navigation 6 (최신 버전)
- Stack Navigator (메인 네비게이션)
- Bottom Tab Navigator (하단 탭)
- Material Top Tabs (상단 탭)

UI/스타일링

Styled Components (CSS-in-JS)
React Native Size Matters (반응형 디자인)
커스텀 컴포넌트 시스템 구축

개발 도구

Reactotron (디버깅 도구)
CodePush (OTA 업데이트)
Flipper 호환 설정

주요 기능 및 특징

1. ~~~~~ 플랫폼

~~~~~~
프로필 및 예약 시스템

2. 멀티플랫폼 빌드 시스템

json
// 환경별 빌드 스크립트
"android:dev": "development 환경"
"android:stg": "staging 환경"
"android:prod": "production 환경"

3. 소셜 로그인

Google Sign-In
Apple Authentication
Facebook SDK

4. 결제 시스템

Stripe 결제 연동
쿠폰 시스템

5. 미디어 처리

카메라/이미지 피커
비디오 재생 (react-native-video)
이미지 리사이징 및 썸네일 생성

6. 실시간 기능

Firebase (푸시 알림, 실시간 DB)
~~~~~~
AWS S3 파일 업로드

7. 다국어 지원

i18next + react-i18next
한국어, 영어, 일본어 지원

보안 & 인증

JWT 토큰 기반 인증
Keychain 보안 저장소
이메일 인증 시스템

성능 최적화

Redux-Persist (상태 영속화)
Patch-Package (라이브러리 패치)
이미지 최적화 및 캐싱

아키텍처 특징

장점

✅ 체계적인 폴더 구조 - 확장성과 유지보수성 우수

✅ 검증된 기술 스택 - 안정적인 라이브러리 조합

✅ 다국어/다환경 지원 - 글로벌 서비스 준비

✅ 실시간 기능 - 의료 상담에 필수적인 기능들

✅ 포괄적인 인증 시스템 - 다양한 로그인 옵션

개선 포인트

⚠️ React Native 버전 - 0.70.9 (최신 0.74+로 업그레이드 권장)

⚠️ TypeScript 완전 도입 - 부분적 적용으로 타입 안정성 제한

⚠️ New Architecture 미적용 - 성능 향상 기회

도메인별 특징

~~~ 앱으로서 HIPAA 준수를 위한 보안 기능들과 실시간 상담을 위한 채팅/비디오 기능이 잘 구현되어 있는 성숙한 프로덕션 앱 구조입니다.

전반적으로 잘 설계된 엔터프라이즈급 React Native 앱이며, 의료 도메인의 복잡한 요구사항들을 체계적으로 해결한 아키텍처입니다!

일단 전체적은 구조는.. 나쁘지않아 보이지만.. 시작은 좋았던거 같습니다.

흠.. 일단 자바스크립트로 많이 개발되어있고 가끔씩 타입스크립트로 개발된 부분도 있네요.

그리고 iOS, 안드로이드 네이티브 모듈도 있고 각각 네이티브 화면으로 개발되어있습니다. 디바이스 연동이 되어있어요

RN버전도 낮고 일관되지 않은 코드 컨벤션, 정리되지 않은 컴포넌트, assets 이미지는 다 깨져있는걸 사용하고 있네요.. 왜이렇게 작은지 ㅠ

일단 상황을 말씀드렸고 제안을 드렸습니다.

현재 실질적인 사용자도 없고, 업데이트 한지도 오래되셨으니 시간 한달만 주시면 모든 기능은 아니더라도

메인 기능까지는 새로운 프로젝트를 만들어서 출시까지 하는게 어떻겠습니까 ㅠㅠㅠ?

만약 유저가 있다면 이런 결정은 절대할 수 없었을것이고, AI가 없었다면 저는 한달이라는 말도안되는 일정을 말씀도 못드렸을 것 같습니다.

그래서 그렇게 시작을 하게되었습니다.

새로운 프로젝트를 이렇게 구성하기로 했습니다.

프로젝트 최종 확정 사항

프로젝트 기본 설정

생성 방식: React Native CLI
프로젝트명: ~~~~~~
Bundle ID: 기존과 동일
TypeScript: Strict 모드 활성화
환경 변수: react-native-config (.env.development, .env.staging, .env.production)

️ 아키텍처 & 핵심 기술

아키텍처: Feature-Sliced Design (FSD)
상태 관리: Zustand + TanStack Query
로컬 저장소: React Native MMKV
UI 프레임워크: NativeWind (기본) + React Native Paper (선택적)
네비게이션: React Navigation 6
애니메이션: React Native Reanimated 3

테스트 & 문서화

단위/통합 테스트: Jest + React Native Testing Library
E2E 테스트: Maestro

모니터링 도구

크래시 리포팅: Sentry ✨
사용자 분석: Firebase Analytics
성능 모니터링: Firebase Performance

️ 개발 도구

통합 개발 환경: VS Code(확장: ES7+ React/Redux/React-Native snippets, TypeScript Importer, Tailwind CSS IntelliSense, TypeScript Importer, ESLint, Prettier)
상태 디버깅: React Native Debugger
시스템 디버깅: Flipper
상태 관리 디버깅: Zustand devtools

코드 컨벤션

파일 네이밍: kebab-case
Export 방식:
- Pages: default export
- Features/Widgets/Shared: named export
폴더 구조: 각 폴더마다 index.ts 파일로 export 정리
절대 경로: @ 별칭 사용
포맷팅: VS Code 자동 저장시 포맷팅 (ESLint/Prettier)

️ FSD 폴더 구조

src/
├── app/           # 앱 레벨 설정 (providers, navigation, store)
├── pages/         # 화면 컴포넌트 (라우팅 단위)
├── widgets/       # 복합 위젯 (여러 features 조합)
├── features/      # 독립적 비즈니스 기능
├── entities/      # 비즈니스 엔티티 (user, ~~, ~~)
└── shared/        # 공통 리소스 (UI, API, utils)

네이티브 모듈을 만들어야 하기 때문에 expo 보다는 CLI를 선택했습니다.

new Archtecture는 아직 도입이 이르다고 판단하였습니다. 아직 모든 라이브러리가 대응한 상태가 아니기 때문입니다.

Styled-Component/native은 이제 지원을 하지 않기 때문에 NativeWind로 변경하기로 했고, 상태관리는 redux toolkit, zustand중에 고민했지만 아무래도 개발자 인력도 없고, 빠르기 개발 가능해야하고, 보일러 플레이트코드가 적은 zustand로 결정했습니다.

우선 다음 시간에는 새로운 프로젝트 세팅을 완료해서 오겠습니다~!

감사합니다.

Cursor로 React Native 개발을 해보자 (1) - 세팅

엔디엘(no Dream no Life) — Wed, 25 Jun 2025 09:09:44 +0900

안녕하세요.

엔디엘입니다.

앞으로 Cursor IDE로 RN 개발을 해보려고 합니다.

iOS를 개발할때는 워낙 자동완성, 스닙펫 등이 잘 되어 있어서 편한지 몰랐는데 VScode로 RN개발을 시작하고 나니

정말 편하게 개발했었구나 라는게 느껴졌습니다.

그래서 어쩔 수 없이 개인적으로 해당 프로젝트에 맞는 스닙펫을 추가하였고 코드를 치는 시간을 단축하면서 개발을 해왔었습니다.

근데 이제 그걸 Cursor가 기똥차게 지원을 해준다고 하니.. 안해볼 수 없겠죠.. 사실 늦은감이었지만.. 지금이라도 무료 기간 2주동안 사용하면서 정말 필요할지 아니면 Vscode로 그대로 개발해도 문제없을지 경험을 해보겠습니다.

IDE만 변경하는거라서 세팅할건 따로 많이 없을 것 같네요.

이제부터 Claude, Perplexity에게 물어보면서 세팅을 진행해볼게요~

1. VSCode 확장 프로그램(Extensions) 이식
• Cursor 설치 시, VSCode에서 사용하던 확장 프로그램과 설정을 “원클릭”으로 가져올 수 있습니다. 설치 후 첫 실행 시 Import 옵션을 선택하세요.
• 만약 건너뛰었다면, Cursor의 Extension Marketplace에서 필요한 확장을 직접 설치할 수 있습니다.

React Native, ESLint, Prettier, GitLens, CodePush 등 기존에 쓰던 확장 대부분이 호환됩니다.
2. 빌드 및 실행 환경
• React Native의 Metro, esbuild 등 기존 빌드 도구는 터미널에서 그대로 사용하면 됩니다. Cursor의 터미널은 VSCode처럼 프로젝트 루트에서 열리고, `npm run android`, `npx expo start` 등 명령어를 그대로 실행할 수 있습니다.
• 별도의 빌드 세팅은 필요하지 않습니다. 단, Radon IDE와 같은 React Native 통합 개발 확장을 쓰고 싶다면, Cursor의 Extension Marketplace에서 Radon IDE를 설치하면 VSCode와 동일하게 통합 시뮬레이터, 디버거, 인스펙터 등을 사용할 수 있습니다.
3. AI 기능 및 문서화(옵션)
• Cursor만의 AI 코드 생성, 자동 리팩토링, 문서화 기능을 활용하려면, 추가로 “Cursor Rules” 확장이나 `.cursor/rules` 디렉터리를 프로젝트에 추가해 팀 규칙을 정의할 수 있습니다.
• 필요시, 프로젝트별로 커스텀 문서(예: Expo, React Native 공식 문서)를 Cursor에 추가해 AI가 더 정확하게 코드를 생성하도록 할 수 있습니다.
4. 기타 확인 사항
• 기존 VSCode 설정(테마, 키 바인딩 등)도 대부분 이식됩니다. 일부 커스텀 단축키나 UI는 다를 수 있으니, Cursor Settings에서 재설정 가능.
• CodePush, 자산 관리, 타입스크립트 등 기존 워크플로우는 그대로 유지됩니다

별도의 빌드 세팅은 필요 없고, 확장 프로그램만 기존처럼 설치/이식하면 바로 개발을 시작할 수 있습다.

Radon IDE 등 React Native 특화 확장도 Cursor에서 지원하니 필요에 따라 설치해 활용하면 됩니다.

라네요?

일단 Cursor 다운로드하고 실행하고 로그인하니 바로 아래와 같이 세팅하고 확장기능 그대로 가져올건지 물어보네요.

일단 그대로 가져와 보려고 하다가..

멈칫했습니다. Cursor에서 RN 개발할때 필수 확장이 다를 수 있으니? 물어보니까.. 비슷하네요. ㅎㅎ import 고고

그 다음은 테마.. 요즘은 어둡고 글자가 쨍쨍한게 눈이 확 뛰어서 좋더라구요.. 점점 늙어가서 그런가.. ㅠㅠ

다음에는 이것저것 Next 누르다가 끝났네요.

open proejct를 하고 시작해보겠습니다~

iOS 앱을 Android 앱으로 포팅해보자 - (2) 포팅 과정 - 실패 (끝)

엔디엘(no Dream no Life) — Wed, 4 Jun 2025 10:54:52 +0900

안녕하세요. 엔디엘입니다.

네.. 제목에서 이미 예상하셨겠지만 처참하게 실패하였습니다.

우선 포팅 과정의 흐름은 이렇게 진행했습니다.

Claude에게 iOS 프로젝트 분석을 요청한다.
Android 프로젝트를 생성한다.
Claude에게 분석한 iOS 프로젝트 기반으로 Android 앱 개발을 요청한다.
????? 막 개발하다가 멈춰버렸습니다.. 보통 많은 양의 작업을 시작하면 중간에 "계속"이라는 버튼이 나오는데 이번에는 그냥 갑자기 멈추더라고요.. 그래서 "왜 멈췄어? 계속 진행해줘"라고 요청하니 계속 진행합니다.
일단 완료 메시지 → 빌드했더니... 오류가 뜹니다. 확인 요청하니 JAVA 버전에 문제가 있더라고요. 아하!! 그래서 해결하고 다시 빌드..
엄청난 라이브러리 의존성 오류들이 줄줄이~~~ 서로 충돌하고 난리나더라고요..
오류 복붙해서 계속 수정요청 → 빌드 → 복붙 이렇게 한 10번은 반복한 것 같아요..
그래서 결국 빌드가 됐습니다. 화면을 보니 ??????? 으잉? 이건 뭐지.. 로그인 화면도 아니고 갑자기 이미 메인으로 들어와 있고.. 기능은 전혀 없고.. 그냥 탭이랑 각 흰 화면만 있더라고요.. 그리고 추가 개발을 요청해도 계속 UI를 똑같이 그리지도 않고... ㅠㅠ
이때부터 하.. 한숨이 나오더니 하늘을 보기 시작하고.. 하기 싫어지고.. 그래도 여차여차 로그인, 회원가입, 메인, 설정까지 개발을 완료했습니다. 하지만 이걸 계속 이대로 진행하는 것이 가능할 것 같지 않았습니다. 그래서 일단 멈추기로 했습니다.

여기까지가.. 어제 진행했던 내용인데 사실 실망스러우면서도 안도가 된다고 해야 하나요 ㅎㅎ 이렇게 쉽게 되어버리면 누구나 다 할 수 있는 개발자가 되어버리는 거잖아요~~

가장 큰 실수 포인트를 생각해보면

한 번에 개발이 완성될 것이라는 생각
스텝 바이 스텝으로 개발 요청을 진행하지 않았다.
커밋을 하지 않았다.
사용량 소진에 대해서 고려하지 못했다.
계속되는 채팅 만료 상황도 고려하지 못했다.
하루 만에 될 것이라고 생각했다.
너무 AI에게 의존도가 높았다.
Claude의 프로젝트를 생성하지 않았다.

원래 인생은 무한 실수와 실패를 반복하는 거 아니겠습니까~! 다시 시작해보면 되죠!

자, 이제 단계별로 진행해보려고 합니다.

우선 앱 체크리스트를 뽑아낸다.
앱 체크리스트 기반으로 Claude Project를 생성한다. 그 프로젝트에서 채팅을 항상 시작하자.
안드로이드 프로젝트를 생성하여, 이미지와 필요한 파일들은 직접 iOS에서 옮긴다. Claude MCP Filesystem이 파일을 생성, 수정하는 건 가능하지만 복사, 이동 또는 삭제는 하지 못하더라고요.
필요한 라이브러리들을 먼저 세팅해서 빌드를 진행해본다!! 이때 사용하는 AI가 알고 있는 라이브러리의 최신 버전이 얼마인지 체크하는 게 좋습니다. 내가 사용하려는 것보다 낮다면 Claude 프로젝트에 그 라이브러리 버전에 맞는 설명을 넣어두는 것도 하나의 방법입니다.
API부터 모두 개발 요청한다. 이때 모델도 모두 요청
유틸이나 컬러, config 등등 화면 개발 이외의 것들을 먼저 개발 요청한다.
나머지 준비가 된다면 이제 한 화면씩 개발을 요청한다.
중간중간 빌드를 해보고 스텝마다 커밋을 잊지 말고 진행한다.
한 화면마다 새로운 채팅으로 시작한다.
새로운 채팅 시작 전 현재 개발된 상황을 분석하여, Claude 프롬프트에 최신 개발 상황을 업데이트한다.

아마 이제 이렇게 개발을 진행하면 괜찮지 않을까 생각하는데..

한 번 직접 진행을 해봐야 알 것 같습니다.

이제 함부로 AI를 믿고 성급하게 판단하지 않겠습니다.. 적어도 이렇게 하면 중간에 포기할 일은 없지 않을까 싶습니다 ㅎㅎ

그럼 진행 상황에 대해서 중간중간 작성하여 글 올리겠습니다. 감사합니다.

iOS 앱을 Android 앱으로 포팅해보자 - (1) 프로젝트 세팅

엔디엘(no Dream no Life) — Wed, 4 Jun 2025 08:00:05 +0900

안녕하세요. 엔디엘입니다.

이번 시간에는 안드로이드 앱 프로젝트를 세팅해볼 시간을 가질 예정입니다.

그전에 우선 기존 iOS가 어떤 기능이 있고, 어떤 구조로 개발되어 있는지부터 파악해야겠지요?

저는 당연히 제가 개발했으니까 어느 정도는 알고 있지만, 제가 그걸 작성할 생각은 전혀 없습니다..

네.. Claude Desktop - MCP FileSystem을 이용하여 분석을 맡길 예정입니다.

분석 결과를 보시려면 더보기를 클릭해주세요. ↓↓↓↓↓

iOS 프로젝트 분석 결과

이 DriveMaker 프로젝트는 운전 경로를 생성하고 관리하는 iOS 앱입니다. 상당히 체계적으로 구성된 Swift 프로젝트네요!

️ 프로젝트 구조 및 아키텍처

1. 아키텍처 패턴

TCA (The Composable Architecture) 사용
Redux 스타일의 단방향 데이터 플로우
State, Action, Reducer 패턴으로 상태 관리

2. 주요 기술 스택

언어: Swift 5.0
프레임워크: SwiftUI, MapKit, CoreLocation
외부 라이브러리:
- Composable Architecture (상태 관리)
- Alamofire (네트워킹)
- KeychainSwift (보안 저장)
- KakaoSDK (카카오맵 연동)

3. 프로젝트 구조

DriveMaker/
├── App/                    # 앱 메인 구조
├── Assets.xcassets/        # 리소스 파일들
├── Common/                 # 공통 모듈
├── Components/             # 재사용 컴포넌트
├── Core/                   # 핵심 비즈니스 로직
│   ├── Clients/           # API, 인증 클라이언트
│   └── AppState/          # 앱 상태 관리
├── Features/              # 주요 기능들
├── Models/                # 데이터 모델
├── Screens/               # 화면별 구성
│   ├── SplashScreen/
│   ├── LoginScreen/
│   ├── MainTabScreen/
│   ├── RouteMapTab/
│   ├── RouteListTab/
│   ├── NavigationScreen/
│   └── SettingsTab/
└── Utils/                 # 유틸리티 함수들

주요 기능

1. 인증 시스템

Apple 로그인 지원 (AppleAuthClient.swift)
OAuth 기반 인증 (OAuthLoginRequest.swift)
JWT 토큰 관리 (TokenManager.swift)
Keychain을 통한 보안 저장

2. 경로 관리 시스템

경로 생성 및 편집
웨이포인트 관리 (RoutePointDTO)
폴리라인 세그먼트 처리 (PolylineSegmentDTO)
거리 및 예상 시간 계산

3. 지도 및 네비게이션

MapKit 기반 지도 표시
앱 내 네비게이션 기능
음성 안내 (TTS)
카카오네비 연동

4. 탭 기반 UI

홈: 메인 대시보드
경로 목록: 저장된 경로들
경로 생성: 새로운 경로 만들기
설정: 사용자 설정 및 계정 관리

기술적 특징

1. 상태 관리

swift

@Reducer
struct AppFeature {
    struct State: Equatable {
        var appStatus: AppStatus = .splash
        var splashState = SplashFeature.State()
        var loginState = LoginScreenFeature.State()
        var mainTabState = MainTabFeature.State()
    }
}

2. API 클라이언트

완전한 RESTful API 지원
토큰 기반 인증
에러 핸들링 및 로깅
https://api.xxxx.xxxx 서버 사용

3. 경로 데이터 모델

swift

struct DriveRouteResponse: Codable, Identifiable {
    let id: Int
    let title: String
    let totalDistance: Double  // 미터 단위
    let estimatedTime: Int     // 초 단위
    let points: [RoutePointResponseDTO]
    let polylineSegments: [PolylineSegmentResponseDTO]?
}

앱 플로우

스플래시 → 로그인 상태 확인
로그인/회원가입 → Apple 계정 연동
튜토리얼 → 첫 사용자 안내
메인 탭 → 경로 관리 기능들
경로 생성 → 지도에서 경로 선택
네비게이션 → 실제 길안내 실행

UI/UX 특징

다크 모드 기본 설정
네이티브 SwiftUI 사용
탭 기반 네비게이션
모달 및 네비게이션 스택 조합
반응형 디자인

배포 설정

Bundle ID: com.xxxx.xxxxxx
최소 지원 버전: iOS 17.5+
타겟 디바이스: iPhone 전용
버전: 1.0.0

프로젝트의 강점

체계적인 아키텍처: TCA를 통한 예측 가능한 상태 관리
모듈화된 구조: 기능별로 잘 분리된 코드
완전한 API 연동: 백엔드와의 완전한 연동
사용자 경험: 직관적인 UI/UX
확장성: 새로운 기능 추가가 용이한 구조

이 프로젝트는 실제 출시 가능한 수준의 완성도를 가진 드라이브 경로 관리 앱으로 보입니다! 혹시 특정 부분에 대해 더 자세히 알고 싶으시거나, 개선점이나 문제점에 대해 논의하고 싶으시다면 말씀해 주세요.

제 기준에는 꽤 상세하게 잘 분석해준 것 같습니다. 어떤 프로젝트인지 대략적으로 한번에 파악이 되네요.

그럼 이제 안드로이드 프로젝트를 생성하고 세팅해보겠습니다.

우선 안드로이드 앱 기본 프로젝트를 생성했습니다.
iOS 앱 프로젝트 기반으로 안드로이드 앱 개발을 하려고 하는데, 앱 개발 체크리스트를 정해달라고 Claude에게 요청하기.

제가 앞서 글을 작성할 때 모든 플랫폼을 개발하기 전에 앱 개발 체크리스트를 보고 개발 정책을 정해놓고 개발을 진행하면 된다고 말씀드렸습니다. 그래서 저는 기존 iOS 프로젝트를 안드로이드로 그대로 포팅이 문제없이 잘 되는 안드로이드 앱 개발 체크리스트를 작성해달라고 요청했습니다.

결과 보러가기 ↓↓↓↓↓

DriveMaker Android 포팅 체크리스트 (확정)

1. 프로젝트 정의 및 기획

✅ 프로젝트 목표 설정

iOS 기출시 앱의 안드로이드 버전 개발
기존 사용자 데이터 호환성 유지 (동일 API 서버)
안드로이드 사용자층 확장

✅ 비즈니스 모델

iOS와 동일한 무료 모델
Google Play 정책 준수
기존 사용자 계정 연동 지원

2. ️ 기술 스택 및 플랫폼 선정

✅ 플랫폼 전략

네이티브 안드로이드 (Kotlin + Jetpack Compose)
최소 지원 버전: Android 7.0 (API 24)
타겟 SDK: Android 14 (API 34)

✅ 개발 환경

Android Studio Hedgehog 이상
Gradle Kotlin DSL
ktlint + detekt

3. ️ 아키텍처 및 설계 패턴

✅ 아키텍처 선정

MVIKotlin + Clean Architecture
멀티모듈 구조 (iOS Feature 구조 대응)

app/
├── app/                    # 메인 앱 모듈
├── core/
│   ├── common/            # 공통 유틸
│   ├── network/           # 네트워크 모듈
│   ├── database/          # 데이터베이스
│   └── design-system/     # 디자인 시스템
├── feature/
│   ├── auth/              # 인증 (로그인/회원가입)
│   ├── route-map/         # 경로 생성
│   ├── route-list/        # 경로 목록
│   ├── route-detail/      # 경로 상세
│   ├── navigation/        # 네비게이션
│   └── settings/          # 설정
└── shared/                # 공유 모델

✅ 의존성 주입

Hilt

4. 상태 관리 및 데이터 흐름

✅ 상태 관리

MVIKotlin (TCA 스타일 구현)
Kotlin Flow + StateFlow
단방향 데이터 플로우

5. 네비게이션 및 라우팅

✅ 네비게이션

Navigation Component with Compose
Bottom Navigation (메인 탭)
딥링킹 지원 (xxxx:// 스키마)

6. 데이터 저장 및 관리

✅ 로컬 저장소

Room Database (경로 데이터)
EncryptedSharedPreferences (토큰 저장)
Preferences DataStore (설정값)

7. 네트워크 통신 및 API

✅ API 통신

Retrofit + OkHttp
동일한 서버 엔드포인트 (https://api.xxxx.xxxx)
JWT 토큰 인증 (iOS와 동일)

8. ⚡ 비동기 처리

✅ 비동기 처리

Kotlin Coroutines
WorkManager (백그라운드 작업)

9. UI/UX 설계

✅ 디자인 시스템

Material Design 3 적용
라이트 모드 전용 (다크모드 미지원)
iOS 디자인 참고한 커스텀 컴포넌트

10. ️ 지도 및 네비게이션

✅ 지도 서비스

Google Maps SDK for Android
Google Directions API
Google Places API (주소 검색)

11. 인증 시스템

✅ 인증 방식 (둘 다 지원)

Google Sign-In (주요 인증)
Kakao Login SDK (iOS와 동일)

12. 테스트 전략

✅ 테스트 도구

JUnit 5 + Truth (단위 테스트)
Espresso + Compose Testing (UI 테스트)
Mockk (모킹)

13. 배포 및 DevOps

✅ 배포 전략

Google Play Console 배포
기존 GitHub Actions 확장 (iOS + Android)
Fastlane 안드로이드 버전
iOS 출시 후 안드로이드 순차 출시

14. 모니터링

✅ 분석 도구

Firebase Analytics (iOS와 동일)
Firebase Crashlytics
Play Console 분석

iOS와 비슷한 MVI라는 아키텍처를 사용한다고 하는군요;;; 잘 모르지만 이렇게 결과가 나왔습니다!

다음 시간에는 바로!! Claude에게 포팅을 요청해보도록 하겠습니다.

iOS 앱을 Android 앱으로 포팅해보자 - 시작

엔디엘(no Dream no Life) — Wed, 4 Jun 2025 07:31:57 +0900

안녕하세요. 엔디엘입니다.

저번 시간에 AI를 이용한 앱 개발을 진행하면 플랫폼과 상관없이 개발이 가능하다고 포부 있게 말씀드렸습니다.

이제 이것이 정말 가능한지 저도 직접 해보면서 그 과정을 기록으로 남기려고 합니다.

기존 iOS 앱 소개

저에게는 얼마 전에 AI 앱 개발로 출시한 iOS 앱이 하나 있습니다. 최신(저에게만) iOS 인기있는 아키텍쳐(TCA)를 적용하여 만든 앱인데요.

나만의 드라이브 코스 경로를 저장해두는 앱으로 드라이브메이커라는 앱입니다.

https://apps.apple.com/us/app/drivemaker/id6746174534

‎DriveMaker

‎DriveMAKER is a tool and app that helps you continuously experience your precious driving moments. From beautiful coastal roads to hidden mountain paths, every drive becomes a special memory. - Save quiet neighborhood drives that help put your precious

apps.apple.com

목표: iOS → Android 포팅

이 앱을 이제 안드로이드 앱으로 포팅을 진행하고자 합니다.

얼마나 걸릴지 감히 예상해보자면... 간단한 앱이니까 길어야 하루가 걸리지 않을까? 라고 생각하고 있습니다.

총 글은 3개로 나누려고 합니다.

1편) 프로젝트 세팅
2편) 포팅 과정
3편) 이슈 & 해결 과정 & 후기

시작 시각: 2025년 6월 4일 오전 7시 25분

과연 언제 완성될지... 한번 시작해보죠!

앱 개발 체크리스트

엔디엘(no Dream no Life) — Fri, 30 May 2025 08:27:47 +0900

✅ 앱 개발 완전 체크리스트 - 플랫폼 무관 핵심 결정사항

모든 앱 개발 프로젝트에서 플랫폼에 관계없이 반드시 초기에 결정해야 할 핵심 사항들을 체계적인 체크리스트 형태로 정리했습니다. iOS, Android, React Native, Flutter 등 어떤 플랫폼을 사용하든 공통으로 적용할 수 있습니다.

1. 프로젝트 정의 및 기획 (개발자라면 2번으로!!)

✔ 프로젝트 목표 설정

[ ] 앱의 핵심 가치 제안 및 목적 명확화
[ ] 타겟 사용자 페르소나 정의
[ ] 주요 기능 및 MVP 범위 설정
[ ] 경쟁사 분석 및 차별화 포인트 도출

✔ 비즈니스 모델 결정

[ ] 수익 모델 (무료/유료/구독/광고/인앱결제) 선택
[ ] 법적 요구사항 및 규제 검토 (GDPR, 개인정보보호법 등)
[ ] 지적재산권 및 라이선스 정책 수립

✔ 프로젝트 관리

[ ] 개발 일정 및 마일스톤 설정
[ ] 예산 및 리소스 할당
[ ] 위험 요소 분석 및 대응 계획

2. ️ 기술 스택 및 플랫폼 선정

✔ 플랫폼 전략

[ ] 네이티브 vs 크로스플랫폼 vs 하이브리드 선택
[ ] 개발 프레임워크 결정
- iOS: UIKit vs SwiftUI
- Android: Java/Kotlin, Jetpack Compose
- Cross-platform: React Native vs Flutter vs Xamarin
[ ] 최소 지원 OS 버전 설정

✔ 개발 환경 구축

[ ] IDE 및 개발 도구 표준화
[ ] 패키지 매니저 및 의존성 관리 방식
[ ] 코드 스타일 가이드 및 린터 설정
- ESLint/Prettier (React Native)
- SwiftLint (iOS)
- ktlint/detekt (Android)
- dart analyze (Flutter)

✔ 백엔드 및 인프라

[ ] 백엔드 기술 스택 선정
[ ] 클라우드 서비스 선택 (AWS, GCP, Azure, Firebase)
[ ] CDN 및 파일 저장소 전략

3. ️ 아키텍처 및 설계 패턴

✔ 아키텍처 패턴 선정

[ ] MVC / MVVM / MVP / Clean Architecture / Hexagonal 선택
[ ] 레이어 구조 설계 (Presentation - Domain - Data)
[ ] 의존성 역전 원칙 적용 여부

✔ 프로젝트 구조

[ ] 기능 중심(Feature-based) vs 계층적 구조(Layer-based) 선택
[ ] 모듈화 전략 (Core, Feature, Shared 등)
[ ] 모놀리식 vs 멀티모듈 구조 결정

✔ 의존성 주입

[ ] DI 컨테이너 사용 여부 및 선택
[ ] 생명주기 관리 (Singleton, Transient, Scoped)
[ ] 테스트를 위한 Mock 객체 전략

4. 상태 관리 및 데이터 흐름

✔ 상태 관리 패턴

[ ] 로컬 상태 vs 전역 상태 구분 및 관리 전략
[ ] 상태 관리 라이브러리 선정
- React Native: Redux, MobX, Zustand, Context API, Recoil
- Flutter: Provider, Bloc, Riverpod, GetX, Cubit
- iOS: RxSwift, Combine, MVVM 패턴
- Android: LiveData, ViewModel, RxJava, Hilt

✔ 데이터 흐름 설계

[ ] 단방향 데이터 흐름 적용 여부 (Flux, Redux 패턴)
[ ] 이벤트 처리 방식 (Event Bus, Command Pattern, NotificationCenter)
[ ] 상태 불변성(Immutable) 정책 설정

✔ 서버 상태 관리

[ ] React Query, SWR, Apollo Client 등 서버 상태 라이브러리
[ ] 캐싱 전략 및 무효화 정책
[ ] Optimistic Updates 적용 여부
[ ] Background Sync 및 오프라인 지원

5. 네비게이션 및 라우팅

✔ 네비게이션 패턴

[ ] Stack Navigation (화면 스택 관리)
[ ] Tab Navigation (하단/상단 탭)
[ ] Drawer Navigation (사이드 메뉴)
[ ] Modal Navigation (팝업, 바텀시트)

✔ 라우팅 전략

[ ] Named Routing vs Direct Component Navigation
[ ] 정적 라우팅 vs 동적 라우팅
[ ] 중첩 라우팅 구조 설계
[ ] 조건부 라우팅 (로그인 상태, 권한 기반)

✔ 딥링킹 및 네비게이션 상태

[ ] Deep Linking 설계 및 구현
[ ] Universal Links (iOS) / App Links (Android)
[ ] 네비게이션 스택 관리 및 백버튼 처리
[ ] 탭 간 상태 유지 전략

6. 데이터 저장 및 관리

✔ 로컬 저장소 전략

[ ] Key-Value 저장소
- iOS: UserDefaults, Keychain
- Android: SharedPreferences, EncryptedSharedPreferences
- Cross-platform: AsyncStorage, MMKV
[ ] 관계형 데이터베이스
- SQLite, Room (Android), Core Data (iOS), Realm
[ ] 파일 시스템 저장 전략

✔ 데이터 보안 및 암호화

[ ] 민감 정보 암호화 방식 결정
[ ] 생체 인증 연동 (TouchID, FaceID, Fingerprint)
[ ] 보안 저장소 사용 (Keychain, Android Keystore)

✔ 데이터 동기화

[ ] 오프라인 우선 vs 온라인 우선 아키텍처
[ ] 서버-클라이언트 동기화 전략
[ ] 충돌 해결 메커니즘 (Last Write Wins, Operational Transform)
[ ] 배치 동기화 및 실시간 동기화

7. 네트워크 통신 및 API

✔ API 통신 방식

[ ] REST API vs GraphQL vs gRPC 선택
[ ] HTTP 클라이언트 라이브러리 선정
- Axios, Fetch (JavaScript)
- Retrofit, OkHttp (Android)
- Alamofire, URLSession (iOS)

✔ 인증 및 보안

[ ] 인증 방식 (OAuth, JWT, API Key, Session)
[ ] SSL Pinning 및 Certificate Transparency
[ ] API 보안 정책 (Rate Limiting, CORS)

✔ 에러 처리 및 네트워크 관리

[ ] 통일된 에러 객체 정의 및 처리 위치
[ ] 네트워크 상태 감지 및 재시도 정책
[ ] 타임아웃 설정 및 Circuit Breaker 패턴
[ ] 요청/응답 인터셉터 및 로깅

8. ⚡ 비동기 처리 및 백그라운드 작업

✔ 비동기 프로그래밍 패턴

[ ] Callback vs Promise vs Async/Await
[ ] Observable/Stream 기반 처리 (RxJS, RxSwift, RxDart)
[ ] Coroutines (Kotlin) / Future/Task 패턴

✔ 백그라운드 작업 관리

[ ] 백그라운드 태스크 처리 (파일 업로드/다운로드, 동기화)
[ ] 주기적 작업 스케줄링 (WorkManager, Background App Refresh)
[ ] 푸시 알림 백그라운드 처리

✔ 동시성 및 리소스 관리

[ ] Race Condition 방지 및 동시성 제어
[ ] 취소 가능한 비동기 작업 구현
[ ] 메모리 및 스레드 안전성 보장

9. UI/UX 설계 및 디자인 시스템

✔ 디자인 시스템 구축

[ ] 디자인 가이드라인 채택
- Material Design (Android)
- Human Interface Guidelines (iOS)
- 커스텀 디자인 시스템
[ ] 컬러 팔레트 및 브랜딩 정의
[ ] 타이포그래피 시스템 (폰트, 크기, 가중치)
[ ] 공통 컴포넌트 라이브러리 (버튼, 입력 필드, 카드 등)

✔ 테마 및 반응형 설계

[ ] 다크 모드 / 라이트 모드 지원
[ ] 동적 테마 변경 및 시스템 설정 연동
[ ] 반응형/적응형 UI 설계
[ ] 다양한 화면 크기 및 해상도 대응 (폴더블, 태블릿)

✔ 애니메이션 및 인터랙션

[ ] 화면 전환 애니메이션 정의
[ ] 마이크로 인터랙션 및 피드백 효과
[ ] 로딩 상태 UI (Skeleton, Shimmer, Progress)
[ ] 제스처 및 터치 인터랙션

10. ♿ 접근성(Accessibility) 및 사용성

✔ 스크린 리더 지원

[ ] 의미있는 레이블 및 설명 제공
[ ] 포커스 관리 및 키보드 네비게이션
[ ] 콘텐츠 구조화 (Heading, Landmark)

✔ 시각적 접근성

[ ] 색상 대비 및 색맹 사용자 고려
[ ] 폰트 크기 조절 지원 (Dynamic Type)
[ ] 고대비 모드 및 시각적 보조 기능

✔ 모터 및 인지적 접근성

[ ] 적절한 터치 영역 크기 (최소 44pt/48dp)
[ ] 제스처 대안 제공 (음성 제어, 스위치 제어)
[ ] 시간 제한 및 자동 재생 콘텐츠 제어
[ ] 접근성 테스트 및 검증 프로세스

11. 국제화(i18n) 및 지역화(l10n)

✔ 다국어 지원

[ ] 문자열 리소스 관리 및 번역 시스템
[ ] 동적 언어 변경 지원
[ ] 복수형 처리 및 성별 구분
[ ] 번역 관리 프로세스 및 도구 선정

✔ 지역화 고려사항

[ ] RTL (Right-to-Left) 언어 지원
[ ] 날짜/시간/통화 형식 로컬라이제이션
[ ] 문화적 차이 및 색상 의미 고려
[ ] 로컬 법규 및 규제 준수

12. 성능 최적화

✔ 렌더링 최적화

[ ] 가상화 (Virtual Scrolling, RecyclerView)
[ ] 메모이제이션 및 불필요한 리렌더링 방지
[ ] 이미지 최적화 (Lazy Loading, WebP, 리사이징)
[ ] 애니메이션 성능 최적화 (60fps 유지)

✔ 메모리 및 리소스 관리

[ ] 메모리 누수 방지 및 프로파일링
[ ] 대용량 데이터 처리 전략
[ ] 이미지 메모리 관리 및 캐싱
[ ] 가비지 컬렉션 최적화

✔ 번들 및 로딩 최적화

[ ] 코드 스플리팅 및 지연 로딩
[ ] Tree Shaking 및 Dead Code Elimination
[ ] 번들 크기 분석 및 최적화
[ ] 앱 시작 시간 최적화

13. ️ 보안 및 개인정보 보호

✔ 데이터 보안

[ ] 저장 데이터 암호화 (AES, RSA)
[ ] 전송 데이터 보안 (TLS/SSL, Certificate Pinning)
[ ] 민감 정보 관리 (API 키, 토큰, 비밀번호)

✔ 앱 무결성 및 보안

[ ] 코드 난독화 및 안티 디버깅
[ ] 루팅/탈옥 탐지 및 대응
[ ] 앱 변조 방지 및 무결성 검사
[ ] 스크린샷 및 녹화 방지 (민감 화면)

✔ 인증 및 개인정보

[ ] 다중 인증 (2FA/MFA) 지원
[ ] 생체 인증 연동 및 폴백 처리
[ ] 개인정보 처리방침 및 GDPR/CCPA 준수
[ ] 사용자 동의 관리 및 옵트아웃 기능

14. 오프라인 지원 및 동기화

✔ 오프라인 전략

[ ] 오프라인 우선 아키텍처 설계
[ ] 오프라인 상태 감지 및 UI 표시
[ ] 오프라인 기능 범위 정의
[ ] 로컬 데이터 우선 표시 전략

✔ 동기화 및 충돌 해결

[ ] 자동 동기화 vs 수동 동기화
[ ] 충돌 해결 메커니즘 (Merge, Overwrite, User Choice)
[ ] 배치 동기화 및 백그라운드 업데이트
[ ] 스토리지 할당량 관리

15. 테스트 전략 및 품질 보증

✔ 테스트 유형 및 범위

[ ] 단위 테스트 (Unit Test) - 비즈니스 로직
[ ] 통합 테스트 (Integration Test) - API, 데이터베이스
[ ] UI 테스트 (E2E Test) - 사용자 시나리오
[ ] 스냅샷 테스트 - UI 컴포넌트 회귀 방지

✔ 테스트 도구 및 자동화

[ ] 테스트 프레임워크 선정
- Jest, React Testing Library (React Native)
- XCTest, Quick/Nimble (iOS)
- JUnit, Espresso, Robolectric (Android)
- Flutter Test (Flutter)
[ ] CI/CD 파이프라인 테스트 자동화
[ ] 코드 커버리지 목표 설정 (80% 이상 권장)

✔ 품질 관리

[ ] 정적 분석 도구 (SonarQube, CodeClimate)
[ ] 코드 리뷰 프로세스 및 체크리스트
[ ] 다양한 디바이스/OS 호환성 테스트
[ ] 성능 테스트 및 부하 테스트

16. 에러 처리 및 로깅

✔ 에러 분류 및 처리

[ ] 에러 분류 체계 정의
- 네트워크 에러, 비즈니스 로직 에러, 시스템 에러
[ ] 글로벌 에러 핸들러 구현
[ ] 에러 바운더리 및 복구 메커니즘
[ ] 사용자 친화적 에러 메시지 작성

✔ 로깅 및 모니터링

[ ] 로깅 레벨 정의 (Error, Warning, Info, Debug)
[ ] 크래시 리포팅 시스템 (Crashlytics, Sentry, Bugsnag)
[ ] 실시간 모니터링 및 알림 시스템
[ ] 로그 보안 및 개인정보 제거

17. 푸시 알림 및 백그라운드 서비스

✔ 알림 전략

[ ] 로컬 알림 vs 원격 알림 구분
[ ] 알림 권한 요청 타이밍 및 UX
[ ] 알림 카테고리 및 중요도 설정
[ ] 조용한 알림 및 배지 관리

✔ 푸시 알림 구현

[ ] FCM (Firebase Cloud Messaging) 연동
[ ] APNs (Apple Push Notification service) 연동
[ ] 알림 딥링크 및 데이터 페이로드 처리
[ ] 포그라운드/백그라운드 알림 처리 차별화

18. 배포 및 DevOps

✔ 빌드 시스템

[ ] 환경별 설정 관리 (Development, Staging, Production)
[ ] 빌드 자동화 및 스크립트 작성
[ ] 코드 사이닝 및 인증서 관리
[ ] 앱 번들 최적화 (Android App Bundle, iOS App Thinning)

✔ CI/CD 파이프라인

[ ] 지속적 통합 도구 선정 (GitHub Actions, GitLab CI, Bitrise)
[ ] 자동화된 테스트 실행
[ ] 빌드 및 배포 자동화
[ ] Fastlane 등 배포 도구 활용

✔ 앱스토어 관리

[ ] 앱스토어 등록 정보 및 메타데이터 관리
[ ] 심사 가이드라인 준수 체크
[ ] 점진적 배포 (Phased Rollout) 전략
[ ] A/B 테스트 및 실험 설계

19. 모니터링 및 분석

✔ 성능 모니터링

[ ] 앱 성능 지표 추적 (CPU, 메모리, 배터리)
[ ] 네트워크 성능 모니터링
[ ] 크래시 및 ANR 추적
[ ] 앱 시작 시간 및 응답성 측정

✔ 사용자 행동 분석

[ ] 이벤트 추적 시스템 구축
[ ] 사용자 여정 및 퍼널 분석
[ ] 리텐션 및 이탈률 분석
[ ] 사용자 세그멘테이션 및 코호트 분석

✔ 비즈니스 지표

[ ] 매출 및 전환율 추적
[ ] 사용자 생애 가치 (LTV) 계산
[ ] 실시간 대시보드 구축
[ ] 데이터 개인정보 보호 준수

20. 팀 협업 및 프로젝트 관리

✔ 코드 관리 및 협업

[ ] Git 브랜치 전략 (Git Flow, GitHub Flow)
[ ] 코드 리뷰 정책 및 PR 템플릿
[ ] 컨벤션 및 스타일 가이드 문서화
[ ] 라이브러리 업데이트 정책

✔ 문서화 및 지식 관리

[ ] API 문서화 (Swagger, GraphQL Playground)
[ ] 아키텍처 결정 기록 (ADR) 작성
[ ] 온보딩 가이드 및 개발 환경 설정
[ ] 릴리즈 노트 및 변경 이력 관리

✔ 프로젝트 관리

[ ] 이슈 및 작업 관리 (Jira, Linear, GitHub Issues)
[ ] 스프린트 계획 및 애자일 프로세스
[ ] 커뮤니케이션 도구 (Slack, Discord, Teams)
[ ] 지식 공유 및 회고 프로세스

핵심 체크리스트 요약표

대분류 핵심 결정사항 주요 선택지/도구

프로젝트 정의	목표, 요구사항, 일정	MVP 범위, 비즈니스 모델, 법적 검토
️ 기술 스택	플랫폼 및 프레임워크	Native/Cross-platform, 최소 지원 버전
️ 아키텍처	설계 패턴, 구조	MVC/MVVM/Clean, Feature-based, DI
상태 관리	로컬/글로벌 상태	Redux/Bloc/Provider, 서버 상태, 캐싱
네비게이션	화면 이동 구조	Stack/Tab/Drawer, 딥링크, 라우팅
데이터 저장	저장소 전략	SQLite/Realm, 암호화, 동기화
네트워크/API	통신 방식	REST/GraphQL, 인증, 에러 처리
⚡ 비동기 처리	비동기 패턴	Promise/RxJS, 백그라운드 작업
UI/UX	디자인 시스템	컴포넌트 라이브러리, 테마, 애니메이션
♿ 접근성	접근성 지원	스크린 리더, 색상 대비, 터치 영역
국제화	다국어/지역화	문자열 관리, RTL, 로컬 형식
성능 최적화	성능 전략	메모리/렌더링/번들 최적화
️ 보안	보안 정책	암호화, 인증, 개인정보 보호
오프라인	오프라인 전략	오프라인 우선, 동기화, 충돌 해결
테스트/품질	테스트 전략	Unit/Integration/E2E, 자동화
에러/로깅	에러 처리	글로벌 핸들러, 크래시 리포팅
푸시 알림	알림 전략	FCM/APNs, 딥링크, 권한 관리
배포/DevOps	배포 전략	CI/CD, 환경 관리, 앱스토어
모니터링	분석 및 추적	성능/사용자/비즈니스 지표
협업/관리	팀 협업	Git 전략, 문서화, 프로젝트 관리

활용 팁

✅ 실무 활용 방법

템플릿으로 저장: 이 체크리스트를 Notion, Confluence 또는 GitHub 템플릿으로 저장
프로젝트별 체크: 새 프로젝트 시작 전 체크박스 형태로 활용
팀 공유: 체크 완료된 항목들을 팀원들과 공유하고 문서화
정기 리뷰: 프로젝트 진행 중 중요 결정사항 재검토

우선순위 가이드

최우선: 1-3, 6-8번 (아키텍처, 상태관리, 데이터, 네트워크)
⚡ 중요: 4-5, 9-10, 15번 (네비게이션, UI/UX, 접근성, 테스트)
점진적: 11-14, 16-20번 (국제화, 성능, 보안, 모니터링 등)

어플리케이션 플랫폼을 넘나드는 체계적 접근법

엔디엘(no Dream no Life) — Fri, 30 May 2025 08:15:31 +0900

안녕하세요.

이번 글은 앱을 개발할때 일반적으로 체크해야될 사항에 대해서 말씀드리고자 합니다. ㅎㅎ

우선 AI 에이전트 개발을 진행하다가 왜 갑자기 이런 내용의 글을 쓰게 됐는지 의아해 할 수도 있을 것 같습니다. 이것은 제가 글을 쓰는 목적과도 연관이 있습니다. 저는 더 이상 앱 개발을 진행할때 플랫폼은 그렇게 중요하다고 생각하지 않기 떄문입니다.

중요하다고 생각하지 않는다는 말을 풀어서 설명드리면 하나의 플랫폼에 대해서 깊게 공부하고 개발 경험이 있는 개발자라면 AI 에이전트 개발을 이용해서 어떤 플랫폼이든 개발하는데 문제가 없다는게 제 생각이자 최종 목표입니다.

플랫폼을 넘나드는 공통 요소들

앱 개발에서 플랫폼이 달라도 본질적으로 해결해야 할 문제들은 놀랍도록 유사합니다.

주요 공통 영역

1. 내비게이션 시스템

화면 간 이동 로직
사용자 경험 흐름 설계
히스토리 관리

2. 데이터 저장 방식

로컬 저장소 관리
원격 데이터 동기화
캐싱 전략

3. 아키텍처 패턴

MVVM, MVP, Clean Architecture 등
의존성 주입
상태 관리

4. UI 개발 방식

컴포넌트 기반 설계
반응형 레이아웃
테마 및 스타일링

5. 네트워킹

API 통신
에러 핸들링
보안 처리

이러한 공통 요소들을 체계적으로 정리하고, AI 에이전트에게 명확한 가이드라인을 제공하면 플랫폼과 상관없이 일관된 품질의 개발이 가능하다고 생각합니다.

실전 체크리스트

개발을 시작하거나 기존 앱을 점검할 때 활용할 수 있는 포괄적인 체크리스트를 별도로 정리했습니다. 이 체크리스트는 AI 에이전트와의 협업 시 매우 유용한 가이드라인이 될 것입니다.

상세 체크리스트 확인하기: https://dongmindevloper.tistory.com/53

마무리

AI 시대의 개발자는 특정 플랫폼에 종속되기보다는, 문제 해결 능력과 체계적 사고에 집중해야 합니다. 플랫폼의 세부사항은 AI 에이전트가 도와줄 수 있지만, 전체적인 설계와 방향성은 여전히 개발자의 몫입니다.

이러한 접근법을 통해 더 효율적이고 확장 가능한 개발이 가능할 것이라 믿습니다. 여러분도 이런 방식으로 개발해보시길 추천드립니다.