HONG SEUNGPYOFULL-STACK DEVELOPER & DESIGNER/WORK
07BEYOND CLASS SECOND · 비요뜨팀
BEYOND CLASS SECOND · TEAM BIYOTTE
기기를 비교하고 우선순위에 맞춰 추천받는 Flutter 앱입니다. Firebase 로그인, 프로필 저장과 Gemini 상담을 구현했습니다.
A Flutter app for comparing devices and finding recommendations based on personal priorities, with Firebase sign-in, profiles and Gemini advice.
앱 기획, Figma UI, Flutter 구현, 로그인과 AI 상담
App planning, Figma UI, Flutter implementation, sign-in and AI advice
기기 탐색·비교·상담 기능 구현 · 일부 기능에 Firebase 설정 필요
Device browsing, comparison and advice implemented; some features require Firebase configuration
TechPicks의 사용자 문제와 앱·웹 범위
TechPicks는 전자기기를 비교하고 사용자 우선순위에 맞춰 추천하는 앱이다. 성능, 카메라, 화면, 배터리와 가성비 점수에 개인 가중치를 적용해 TP Index를 계산한다. 가중치에 따라 같은 기기의 순위도 달라진다.
앱을 기획하고 Figma로 화면을 설계했다. Flutter 앱, Firebase 로그인, TechAPI 카탈로그와 Gemini 상담을 구현했으며 공개 웹도 제공한다.
현재 상태: 핵심 탐색·비교·상담 흐름이 동작한다. Firebase 설정이 없어도 인증을 제외한 주요 기능을 확인할 수 있게 구성되어 있다.
User problem and app-web scope of TechPicks
TechPicks compares devices and recommends them based on user priorities. It applies personal weights to performance, camera, display, battery and value scores to calculate a TP Index. Changing the weights changes the rankings.
The work includes app planning, Figma screens, Flutter implementation, Firebase sign-in, the TechAPI catalog and Gemini advice. A public web application is also available.
Current status: the primary exploration, comparison and consultation flows operate without Firebase configuration; only authentication-dependent features are unavailable.
Flutter 앱, 공개 웹과 TechAPI 카탈로그의 경계
한 저장소 안의 Flutter 앱과 공개 웹을 서로 다른 배포 단위로 취급한다. Flutter는 native navigation, Firebase 세션, camera·scan 같은 기기 기능과 techpicks:// deep link를 담당한다. 웹은 검색 가능한 device page, metadata, sitemap과 공유 URL을 담당한다. UI widget을 강제로 공유하지 않고 slug, fixture와 design token projection만 안정 계약으로 둔다.
원본 TechAPI는 여러 카테고리와 큰 JSON tree를 제공하므로 build tool이 지원 기기만 선택하고 필수 score field, slug와 source를 검증한다. 성공한 결과를 version이 있는 assets/catalog/v1.json으로 묶어 앱 release에 고정한다. build가 실패하면 이전 catalog를 유지하며 불완전한 원격 응답을 runtime에 섞지 않는다.
repository가 bundle catalog를 읽어 device model로 변환하고 scoring service가 성능, camera, display, battery와 value에 사용자 weight를 적용해 TP Index를 계산한다. ranking·compare·detail 화면은 같은 score result를 사용해 서로 다른 숫자를 만들지 않는다. Firebase profile은 선택 weight와 계정 상태를 제공하지만 공개 catalog의 정본은 바꾸지 않는다.
Gemini 상담은 사용자 조건과 선택된 device context를 prompt boundary에 넣어 추천 이유를 설명한다. scan 결과는 catalog slug로 resolve된 경우에만 detail로 이동하고, 불확실한 인식은 후보 선택으로 되돌린다. 같은 slug가 Flutter deep link와 웹 /devices/{slug}에서 같은 제품을 가리켜 앱 설치 여부와 무관하게 링크 정체성을 유지한다.
앱은 release 시점 catalog로 offline ranking을 수행하므로 TechAPI 장애가 핵심 탐색을 막지 않는다. 대신 최신성은 다음 build까지 지연된다. smoke tool이 원격 TechAPI round trip과 local fixture contract를 비교하며, Firebase·Gemini 실패는 로그인·상담 기능에 한정되고 공개 web과 local comparison은 독립적으로 남는다.
Riverpod provider가 검색·비교·선호·랭킹 상태를, DeviceRepository가 기기 조회 계약을, assets/catalog/v1.json이 release 시점 원본을 소유한다. SharedPreferences의 랭킹 snapshot은 로컬 개인화 결과이며 서버 원장으로 취급하지 않는다.
큰 catalog의 파싱, 다중 기기 필터와 TP Index 재계산이 시작 시간과 프레임 비용을 만든다. isolate 파싱, provider select, snapshot version 검사와 golden 성능 기준을 검증해야 하며 최신 가격·재고는 미구현이다.
Firebase·Gemini 설정은 플랫폼별 비밀과 사용자 입력 경계를 가져야 한다. 위젯·golden·offline 테스트는 회귀를 막지만 실제 crash-free·P95 시작 시간은 측정되지 않았다. build catalog 생성과 앱 계약을 한 schema로 검증하는 작업이 남아 있다.
Boundaries between Flutter, the public web and TechAPI data
The Flutter application and public web live in one repository but ship independently. Flutter owns native navigation, Firebase sessions, camera and scan capabilities, and techpicks:// deep links. The web owns crawlable device pages, metadata, sitemaps and shareable URLs. UI widgets are not forced into a shared layer; stable slugs, fixtures and design-token projections form the cross-surface contract.
The full TechAPI source spans multiple categories and a large JSON tree. A build tool selects supported devices, validates required scoring fields, slugs and sources, and emits a versioned assets/catalog/v1.json. Failure retains the previous catalog rather than blending incomplete remote data into runtime behavior.
A repository loads the bundled catalog into device models. The scoring service applies user weights to performance, camera, display, battery and value to produce a TP Index. Ranking, compare and detail views consume the same score result. Firebase profiles provide account state and weights without mutating the public catalog source of truth.
Gemini guidance receives user constraints and selected-device context to explain recommendation reasons. A scan opens detail only after resolving to a known catalog slug; uncertain recognition returns candidate selection. The same slug identifies a device in Flutter deep links and web /devices/{slug} routes.
Offline ranking uses the catalog pinned at release time, so TechAPI downtime does not block core exploration; freshness waits for the next build. A smoke tool compares remote round trips with local fixture contracts. Firebase and Gemini outages remain limited to identity and guidance while public web pages and local comparison continue independently.
Riverpod providers own search, comparison, preference and ranking state; DeviceRepository owns the query contract; assets/catalog/v1.json owns the release-time source. SharedPreferences rank snapshots are local personalization, not a server ledger.
Large-catalog parsing, multi-device filtering and TP Index recomputation affect startup and frame cost. Isolate parsing, provider selection, snapshot-version checks and golden performance budgets require validation. Live price and inventory are missing.
Firebase and Gemini configuration require platform-specific secret and user-input boundaries. Widget, golden and offline tests protect regressions, while crash-free rate and P95 startup time have not been measured. Catalog generation and app contracts should be validated by one schema.
도식을 누르면 크게 볼 수 있습니다. 구현 여부와 참고한 코드도 표시했습니다.
Select a diagram to enlarge it. Labels show implementation status and source files.
데이터 번들, 플랫폼 UI와 앱·웹 분리에 관한 선택
원격 전체 목록은 약 19MB이고 점수 계산에 필요한 형태와 다르다. 런타임에 매번 내려받는 대신 필요한 기기를 build 시 검증·큐레이션해 앱 asset으로 묶었다. freshness는 낮아질 수 있지만 시작 속도와 offline 동작이 안정된다.
공유 UI는 중복을 줄이지만 native interaction과 SEO 목적을 동시에 만족시키기 어렵다. 두 앱은 stable slug와 좁은 계약만 공유하고 각 플랫폼에 맞는 렌더링을 유지한다.
화면 코드 곳곳에 Platform.isIOS 분기를 두지 않는다. iOS Glass와 Android Material 3 차이를 adaptive component와 token 계층에 모아 기능 코드는 유지한다.
인증 설정이 없어도 랭킹·비교·상담이 동작하도록 핵심 탐색 기능을 인증과 분리했다. 개발 진입 장벽은 낮아지지만 로그인 기반 데이터는 별도 fallback 상태가 필요하다.
Catalog, adaptive UI and app-web tradeoffs
The remote full listing is roughly 19MB and is not organized for app scoring. Supported devices are selected and validated at build time, then bundled as an asset. Freshness becomes release-bound, but startup and offline behavior are predictable.
Shared UI could reduce duplication but would compromise native interaction or SEO. The applications share stable identifiers and narrow contracts while rendering independently.
Platform checks are not spread across domain views. Adaptive components and tokens concentrate the difference between iOS Glass and Android Material 3.
Ranking, comparison and consultation remain usable without authentication configuration. This lowers development friction but requires explicit fallback states for account-backed data.
TechPicks의 앱·데이터 계약 검사와 한계
flutter analyze로 Dart 정적 분석을 수행한다.flutter test로 widget과 로직 회귀를 확인한다.dart tool/build_catalog.dart가 TechAPI 자료를 앱용 catalog로 재생성한다.dart tool/smoke_techapi.dart가 원격 데이터 계약의 기본 왕복을 확인한다.shared/ 변경은 Flutter와 웹 양쪽에서 검증하고, 사이트 변경만으로 모바일 build가 실행되지 않게 경계를 유지한다.가중치 변경이 랭킹·비교·상세 점수에 일관되게 반영되는지, 동일 slug가 앱 deep link와 웹 페이지에서 같은 기기를 여는지 확인한다. Firebase가 없는 환경에서는 인증만 비활성화되고 탐색 기능은 유지되어야 한다.
catalog는 build 시점 snapshot이므로 TechAPI 변경이 앱에 즉시 반영되지 않는다. 사용자 추천 품질과 scan 인식률의 공개 통합 지표는 측정되지 않음이다.
App checks, data contracts and known limits
flutter analyze performs Dart static analysis.flutter test covers widget and logic regressions.dart tool/build_catalog.dart rebuilds the app catalog from TechAPI material.dart tool/smoke_techapi.dart checks the basic remote data contract.shared/ are verified by Flutter and web, while site-only work must not trigger mobile builds.Weight changes must propagate consistently to rankings, comparisons and detail scores. The same slug must open the same device from an app deep link and public web page. Without Firebase, authentication is disabled while exploration remains available.
The catalog is a build-time snapshot, so TechAPI changes do not reach an installed app immediately. Public aggregate metrics for recommendation quality and scan recognition are not measured.
TechPicks의 완료 기능과 개선 방향
TechAPI 전체 데이터를 앱 안에 복제하거나 기기 판매·결제를 직접 처리하는 것은 범위가 아니다. 제품 선택을 설명하는 가이드 경험에 집중한다.
Completed capabilities and TechPicks improvements
Bundling the entire TechAPI dataset and processing device sales are not goals. The product remains focused on explaining device choices.