프로젝트에서 보기 →

출퇴근 관리 앱 | 오름캠프 Flutter 모바일 앱 개발 과정 1기 프로젝트

태그
기술 오름캠프 Flutter 앱만들기
시작일
종료일
수정일

https://www.youtube.com/watch?v=cbvMGgnvd44

1. 이건 꼭 알아야 한다[^1]

[? 질문] 오름캠프 Flutter 교육과정 1기 프로젝트에서 “출퇴근 관리자” 앱은 어떤 문제를 어떤 방식으로 해결하려 했는가[^3][^4]
[= 답] 사용자가 QR 스캔으로 출근/퇴근을 기록하고, 기록은 달력(캘린더) 형태의 출퇴근 내역에서 월별로 확인하며, 앱에 포함된 오픈 라이선스 정보까지 제공하는 구조로 간단히 구현했다.[^5][^10][^18]

[? 질문] 앱의 실제 데모 플로우(메인 → 기능 진입 → 예외 처리)는 어떻게 구성되어 있는가[^6][^7]
[= 답] 최초 실행 시 메인 화면 + 하단 3개 메뉴가 보이고, (1) QR 스캔은 출근/퇴근 선택 팝업 후 카메라 권한 획득 및 스캔 진행, 성공 시 시간 표시/실패 시 오류 팝업, 취소/뒤로가기까지 처리한다. (2) 출퇴근 내역은 달력에서 월 이동(미래 월 이동 불가), 이력 유무에 따른 날짜 표시/하이라이트, 날짜 선택 시 상세 시간을 보여준다. (3) 오픈 라이선스 화면은 Apache 2.0 및 사용 라이브러리 목록을 명시한다.[^6][^8][^10][^14][^18][^19]

[? 질문] 발표자가 말한 앱의 한계/개선점과 “강점”으로 내세운 포인트는 무엇인가[^20][^21]
[= 답] 서버 없이 더미 데이터로 동작하는 급히 만든 앱이며 화면 수도 많지 않고, 데모 당시 데이터 미반영으로 숫자가 맞지 않는 이슈가 있었다고 언급한다. 반면 강점으로는 “내가 야근한 것을 윗사람들에게 어필할 수 있다”는 점을 기능적 가치로 제시했고, 개선점으로 권한 공지/버전 화면 같은 추가 화면이 있었으면 더 있어 보였을 것 같다고 말한다.[^20][^23][^27][^28]

2. 큰 그림[^2]

이 콘텐츠는 모두의연구소 오름캠프 Flutter 모바일 앱 개발 과정 1기에서 제작한 “출퇴근 관리자” 앱의 짧은 데모 영상 + 발표 코멘트로, 앱의 화면 구성과 주요 기능(출근/퇴근 기록, 내역 조회, 라이선스 고지), 그리고 구현 상태(더미 데이터, 개선점)를 순서대로 보여준다.[^3][^5][^20]

  • 3탭 구조의 간단한 정보 구조(IA): 메인 화면 하단에 3개 메뉴를 배치하고 각 기능으로 진입하는 흐름을 제시한다.[^6]
  • QR 스캔 기반 출퇴근 기록 + 예외/취소 처리: 출근/퇴근 여부를 먼저 묻고 권한을 획득해 스캔, 정상/비정상 코드와 사용자 취소까지 처리한다.[^7][^10][^13]
  • 캘린더 UI로 월별 출퇴근 이력 시각화: 이력 유무에 따라 날짜를 다르게 표시하고, 월 이동(미래 제한)과 선택 날짜 상세 표시로 사용성을 강조한다.[^14][^15][^16]

3. 하나씩 살펴보기[^1]

3.1 데모 시작: 앱 소개와 “출퇴근 관리자” 주제 선언[^4]

📸 0:04

발표자는 먼저 “만든 앱”을 시연 영상으로 재생하겠다고 말하며, 영상에 소리가 들어 있으니 들리는지 확인해 달라고 요청한다.[^1][^2] 이어서 본인을 “캠프 플러터 교육과정 1기 승”이라고 소개하고, “출퇴근 관리자”라는 주제로 앱을 만들어 보았다고 명확히 밝힌다.[^3][^4] 또한 안드로이드 기준의 간단한 시연 영상을 준비했다고 전제하여, 이후 보여주는 UI/동작이 안드로이드 화면 흐름임을 못 박는다.[^5]

[!NOTE] 데모의 전제(플랫폼/형식) 이 시연은 “안드로이드 기준”이며, 발표자가 직접 실시간 시연이 아니라 “준비한 시험 영상(데모 영상)”을 먼저 틀어 보여주는 구성이다.[^5][^1]

3.2 최초 실행과 메인 화면: 하단 3개 메뉴 구조[^6]

📸 0:29

앱을 최초 실행하면 메인 화면이 나타나고, 하단에 세 개의 메뉴가 존재한다고 설명한다.[^6] 즉, 앱의 전체 내비게이션은 “하단 탭/메뉴 3개”를 중심으로 구성되어 있으며 이후 시연도 이 3개 메뉴를 하나씩 들어가 보는 순서로 진행된다.[^6][^14][^18]

  • 메인 진입 시점에서 확인되는 구성 요소
    • 메인 화면(첫 화면)[^6]
    • 하단 메뉴 3개(각각의 기능 진입점)[^6]

3.3 첫 번째 메뉴: QR 스캔으로 출근/퇴근 기록[^7]

📸 0:34

3.3.1 진입 직후: 출근/퇴근 여부를 묻는 팝업[^7]

하단 메뉴 중 첫 번째로 QR 스캔을 누르면, 곧바로 “사용자가 출근인지 퇴근인지 여부”를 묻는 팝업이 먼저 뜬다고 한다.[^7] 여기서 사용자가 의도를 선택한 뒤에 다음 화면(스캔 화면)으로 이동하는 흐름이다.[^7] 즉, 스캔 자체보다 먼저 “이번 기록이 출근인지 퇴근인지”를 명시적으로 결정하게 하여 데이터의 의미를 분명히 하는 UX를 택했다.[^7]

  • 팝업의 역할
    • 기록 종류(출근/퇴근) 결정[^7]
    • 결정 이후 스캔 화면으로 전환[^7]

3.3.2 권한 처리와 스캔 진행(카메라 권한 → 스캔 진행)[^8]

발표자는 QR 스캔 화면으로 넘어갈 때 카메라 권한을 먼저 획득하는 흐름이 들어가 있다고 말한다.[^8] 권한을 획득한 뒤 스캔이 진행된다고 설명하며, 중간에 “스캔 진행”에 해당하는 과정이 이어진다.[^8][^9] (원문 발화가 일부 뭉개져 있으나, “카메라 … 권한 … 획득한 후 … 진행됩니다”라는 구조로 권한 선행과 스캔 진행을 명확히 언급한다.)[^8][^9]

[!IMPORTANT] 권한 선처리의 의미 QR 스캔 기능에서 카메라 권한은 필수이므로, 앱은 스캔 전에 권한을 확보하는 단계(요청/획득)를 포함한다.[^8]

3.3.3 정상 QR 스캔 성공: 출근 기록 성공과 현재 시간 표시[^10]

정상적인 QR 코드를 스캔하면 “출근 기록에 성공”하고, 동시에 현재 시간을 표시해 준다고 설명한다.[^10] 즉, 기록 결과를 사용자에게 즉시 피드백(성공 여부 + 시간)으로 제공한다.[^10]

  • 성공 시 사용자 피드백
    • 출근 기록 성공 메시지/상태[^10]
    • 현재 시간 표시(기록된 시각을 보여줌)[^10]

3.3.4 비정상 코드 스캔: “올바르지 않다”는 오류 팝업[^11]

사용자가 정상적인 코드가 아닌 “다른 코드”를 스캔한 경우에는, 화면에 올바르지 않다는 팝업 처리가 뜬다고 한다.[^11] 즉, 스캔 결과 검증 로직이 있어 허용된 QR이 아닌 경우를 에러로 처리하며, 사용자에게 이유(정상 코드 아님)를 알려주는 피드백을 제공한다.[^11]

  • 실패 시 사용자 피드백
    • 올바르지 않은 코드 안내 팝업[^11]

3.3.5 사용자 취소/백버튼 등 중단 케이스 처리[^13]

발표자는 QR 스캔 화면에 진입한 사용자가 의도적으로 백버튼을 누르거나 취소했을 경우에도 “취소 처리가 꼼꼼하게 되어 있다”고 언급한다.[^13] 이는 단순 성공/실패뿐 아니라 사용자 행동(중단)까지 케이스로 보고 안정적으로 상태를 정리하는 흐름을 구현했음을 강조하는 대목이다.[^13]

  • 처리하는 중단 케이스
    • 백버튼으로 화면 이탈[^13]
    • 취소 행동[^13]
    • 결과: 취소가 “꼼꼼히 처리”됨(비정상 상태 방지)[^13]

[!TIP] 스캔 기능에서 “취소 처리”의 실무적 포인트 스캔 화면은 카메라/권한/라우팅이 얽혀 있어 사용자가 중간에 나가면 리소스 해제, 화면 상태 복귀 등이 필요하다. 발표자는 이 부분을 “꼼꼼하게” 처리했다고 강조한다.[^13]

3.4 두 번째 메뉴: 출퇴근 내역(달력/캘린더) 조회[^14]

📸 1:49

3.4.1 달력 형식 화면과 월 이동 UI(상단 화살표)[^14][^15]

두 번째 메뉴인 “출퇴근 내력(내역)”을 누르면 달력 형식의 화면이 표시된다고 한다.[^14] 그리고 화면 상단에 있는 화살표 UI를 이용해 “지난 달과 다음 달로 이동”하면서 기록을 볼 수 있다고 설명한다.[^15] 즉, 기본 인터랙션은 월 단위 탐색이다.[^15]

  • UI 구성
    • 캘린더 형태의 메인 영역[^14]
    • 상단 화살표로 월 이동[^15]

3.4.2 미래 월로 이동 불가: 화살표를 숨기는 제약 처리[^15]

발표자는 “당연한 일이지만” 미래 시점으로는 이동되지 않도록 처리했으며, 그 구현 방식으로 미래로 넘어가는 화살표가 사라지게 만들었다고 한다.[^15] 이를 “센스가 돋보인다”는 식으로 사용성/정합성 측면의 배려로 평가한다.[^15]

  • 제약 조건
    • 미래 월 이동 차단[^15]
    • 구현: 미래 방향 화살표 비노출(사라짐)[^15]

[? 질문] 왜 미래 월 이동을 막는 것이 ‘센스’로 언급되는가[^15]
[= 답] 출퇴근 기록은 과거/현재의 실제 발생 데이터이므로 미래 날짜 탐색은 의미가 없거나 혼란을 주기 쉬운데, UI에서 아예 미래 이동 화살표를 없애 불필요한 행동을 예방했기 때문이다.[^15]

3.4.3 이력 없는 날짜 vs 이력 있는 날짜: 기본 숫자 표기와 하이라이팅[^16]

출퇴근 이력이 없는 날짜는 “기본 숫자”로 표시되고, 이력이 있는 날짜는 “하단 표시 영역과 같은 모양으로 하이라이팅”된다고 설명한다.[^16] 즉, 사용자는 달력을 한눈에 보며 어느 날에 기록이 있는지 시각적으로 구분할 수 있다.[^16]

  • 상태별 날짜 표시 규칙
    • 이력 없음: 기본 숫자 형태[^16]
    • 이력 있음: 특정 스타일로 하이라이트(하단 표시 영역과 동일한 모양)[^16]

3.4.4 날짜 선택 시: 화면 중간에 정상 출퇴근 시간 표시[^17]

이력이 있는 날짜를 누르면, 화면 “중간”에 정상적인 출퇴근 시간을 표시한다고 말한다.[^17] 즉, 달력(월/일 단위 탐색)에서 “선택한 날짜의 상세(출근/퇴근 시간)”로 drill-down 되는 구조다.[^17]

  • 상호작용
    • 날짜 탭 → 상세 시간 표시[^17]

3.4.5 이슈(문제) 있는 날짜 표현: 빨간색 등으로 문제를 드러냄[^17][^18]

발표자는 “만약 이슈가 있는 날짜”를 클릭하면, 하이라이팅된 색상과 연계된 방식으로 “어떤 부분이 문제가 있는지”가 드러나게 표시한다고 설명한다.[^17] 예로,

  • 출퇴근이 전부 빨간색일 수도 있고[^17]
  • 퇴근 시간이 없음 같은 경우는 “이런 식으로 표시”한다고 말한다.[^17]

즉, 단순히 시간만 보여주는 것이 아니라 정상/비정상(누락/이상) 상태를 색 등 시각적 장치로 표현해 사용자가 문제를 인지하도록 설계했다.[^17]

[!IMPORTANT] 상태(정상/이상) 시각화 “이슈가 있는 날짜”는 색상/표시를 통해 어떤 값이 문제인지(예: 퇴근 시간 누락)를 드러내는 방식으로 구성되어 있다.[^17]

+++

상세 예시: 발표자가 든 “이슈” 표현의 유형

  • 어떤 날은 출근/퇴근 모두가 문제일 수 있어 전부 빨간색으로 보일 수 있음[^17]
  • 어떤 날은 퇴근 시간만 누락되어 해당 항목이 비정상적으로 표시됨[^17]
    (발표자는 “이런 식으로 표시”라고 말하며 화면 예를 보여주는 흐름이다.)[^17] +++

3.5 세 번째 메뉴: 오픈 라이선스(Apache 2.0) 및 사용 라이브러리 명시[^18][^19]

📸 3:01

마지막 메뉴인 “오픈 라이선스” 화면에서는 Apache License 2.0의 내용과, 앱에 사용된 라이브러리 내용(라이브러리 명시)을 보여준다고 설명한다.[^18] 발표자는 “라이브러리 … 명시”라고 표현하며, 오픈소스 사용에 따른 고지/명시 화면을 앱에 포함했음을 밝힌다.[^18]

  • 포함 내용
    • Apache License 2.0 텍스트/내용[^18]
    • 앱에서 사용한 라이브러리 목록(명시)[^18]

3.6 데모 종료 후 발표 코멘트: 급히 만든 앱, 서버 없음(더미 데이터), 화면 수, 데모 이슈[^20][^21][^22][^23]

📸 3:15

데모 영상이 끝난 뒤 발표자는 “동영상이 발표를 너무 잘해줘서 할 말이 별로 없다”는 식으로 운을 떼면서도, 앱의 제작 상황을 솔직히 설명한다.[^20]

3.6.1 제작 시점/완성도: “몇 시간 전에 급하게”, “서버 없이 더미 데이터”[^20][^21]

발표자는 이 앱이 “몇 시간 전에 급하게 만든” 것이며, 서버는 없이 더미 데이터로 돌아가는 앱이라고 말한다.[^20][^21] 즉, 백엔드 연동이나 실제 데이터 저장/동기화보다는 UI/플로우 중심의 프로토타입에 가깝다는 맥락이다.[^21]

[c 이 앱은 서버 연동 없이 더미 데이터로 동작하는 형태라고 발표자가 직접 한계를 규정한다.][^21]

3.6.2 화면 구성의 단순함: “각 화면도 몇 개 없다”[^22]

또한 “각 화면이라고 할 것도 사실 몇 개 없어” PT를 준비해 봤다고 말한다.[^22] 이는 앱이 3개 메뉴 중심으로 단촐하게 구성되어 있으며, 기능 범위가 제한적이라는 자평이다.[^22]

3.6.3 데모 당시 데이터 이슈: 화면의 숫자가 안 맞는 문제[^23][^24]

발표자는 “요거를 찍을 당시”에는 화면에 데이터가 안 들어가서 “여기랑 숫자가 안 맞는 이슈”가 있었다고 언급한다.[^23] 다만 “실제 앱은 그렇지가 않다”고 덧붙여, 데모 녹화 시점의 세팅/데이터 입력 문제였고 최종 형태에서는 해결되었음을 주장한다.[^24]

  • 문제 상황
    • 데모 녹화 시 데이터 미반영[^23]
    • 그 결과 화면상의 숫자 불일치[^23]
  • 후속 설명
    • 실제 앱에서는 해당 문제가 없다고 해명[^24]

3.7 기능 재정리: 3개 메뉴, QR 스캔 권한, 출퇴근 내역(달력)과 조퇴/야근 등 상태 표시[^25][^26]

📸 3:35

발표자는 다시 한 번 앱을 요약(재진술)하는 방식으로, 메인 화면에서 세 개 메뉴로 진입 가능하다는 점을 말하고, QR 코드 스캔에는 권한 기능과 QR 스캔 기능이 들어 있다고 재확인한다.[^25] 또한 출퇴근 내역이 “달력 형식”이고, 예로 “조퇴한 날”을 누르면 “조퇴한 이력”이 뜨는 방식으로 표시된다고 말한다.[^26]

  • 기능 재진술 포인트
    • 메인 → 3개 메뉴 진입[^25]
    • QR 스캔: 권한 + 스캔 기능 포함[^25]
    • 내역: 달력에서 특정 상태(예: 조퇴) 이력을 확인[^26]

3.8 발표자가 말한 “강점”: 야근 어필 기능/가치 제안[^27]

📸 4:13

발표자는 이 앱의 강점을 묻는 맥락에서, “내가 야근을 한 거를 윗사람들한테 어필을 할 수가 있다”는 점을 강점으로 제시한다.[^27] 즉, 단순 기록/조회에서 나아가 조직 생활에서 **야근 기록이 ‘보여줄 수 있는 근거’**가 된다는 사용 시나리오를 덧붙인 것이다.[^27]

[? 질문] 발표자가 말하는 이 앱의 ‘강점’은 무엇인가[^27]
[= 답] 야근 기록을 남기고 이를 상사/윗사람에게 “어필”할 수 있는 근거로 삼을 수 있다는 점이다.[^27]

3.9 아쉬운 점/개선 아이디어: 오픈라이선스 추가 배경, 권한 공지/버전 화면 제안[^28]

📸 4:24

발표자는 “넣을 게 없어가지고 오픈라이선스 화면도 집어넣었다”고 말해, 라이선스 화면이 기능적 필요뿐 아니라 화면 구성을 풍성하게 하기 위한 선택이었음을 드러낸다.[^28] 이어서 지금 생각해보니 권한 공지 화면과 버전 화면 같은 것을 추가로 1~2개 더 만들었으면 “뭔가 있어 보였을 텐데” 아쉬움이 있다고 말한다.[^28] 즉, 앱 완성도/구성 측면에서 “정보성 설정 화면”을 확장 아이디어로 제시한 것이다.[^28]

  • 추가하면 좋았을 화면(발표자 제안)
    • 권한 공지 화면[^28]
    • 버전 화면[^28]

3.10 프로젝트 진행 맥락과 마무리: 주제 선정의 우연성, Q&A 요청[^29]

📸 4:38

마지막으로 발표자는 주제 선정 과정에서 “선생님한테 얼떨결에 대답한 게 진행된 프로젝트”였다고 말해, 프로젝트 주제가 계획적으로 정교하게 선정됐다기보다 상황적으로 정해진 측면이 있음을 밝힌다.[^29] 그리고 “응답 시간이 필요하시면 질문 받겠다”며 Q&A로 마무리한다.[^29]

4. 핵심 통찰[^30]

  1. [h 앱의 가치 제안은 ‘출퇴근 기록’ 자체보다 ‘기록을 보여줄 수 있음(야근 어필)’이라는 사회적 사용 맥락으로 강화된다.] [^27]

    • 실행: 야근/조퇴/누락 같은 상태를 “리포트/공유”로 확장하면 가치가 더 커질 수 있다.[^27][^17]

  2. [h QR 스캔 기능은 성공/실패만큼 ‘권한 처리’와 ‘사용자 취소/뒤로가기’ 같은 예외 플로우 완성도가 체감 품질을 좌우한다.] [^8][^13]

    • 실행: 권한 거부/영구 거부, 스캔 중 이탈 시 리소스 해제, 재진입 UX를 명확히 설계한다.[^8][^13]

  3. [h 달력 UI는 “월 이동”과 “미래 이동 제한” 같은 작은 제약이 데이터의 정합성과 사용성(혼란 방지)을 함께 만든다.] [^15][^14]

    • 실행: 미래 이동 차단뿐 아니라, 오늘 이후 날짜 비활성/툴팁 등으로 정책을 명시한다.[^15]

  4. [m 프로토타입 단계(더미 데이터)에서도 ‘오픈 라이선스 고지’ 같은 준수 요소를 넣을 수 있지만, 발표자는 동시에 이를 ‘화면 수 보강’의 수단으로도 활용했다.] [^18][^28]

    • 실행: 라이선스/버전/권한 고지 등은 실제 배포 시 필수 요소이므로 초기에 템플릿화해 두면 좋다.[^18][^28]

참고(콘텐츠 정보)

  • 제목: 출퇴근 관리 앱 | 오름캠프 Flutter 모바일 앱 개발 과정 1기 프로젝트[^1]
  • 출처/채널: 모두의연구소[^1]
  • 길이: 4분 55초[^1]
  • 링크: https://www.youtube.com/watch?v=cbvMGgnvd44[^1]

[^1]: (메타) "출퇴근 관리 앱 | 오름캠프 Flutter 모바일 앱 개발 과정 1기 프로젝트", 채널: 모두의연구소, 길이 4:55, https://www.youtube.com/watch?v=cbvMGgnvd44
[^2]: @[00:04] "근데 여기도 소리가 들어 있는데 소리가 들리시는 좀 확인을 부탁드릴게요"
[^3]: @[00:11] "안녕하세요" / @[00:11] "캠프 플러터 교육과정 1기 승입니다"
[^4]: @[00:17] "출퇴근 관리자라는 주제로 앱을 만들어 보았는데요"
[^5]: @[00:23] "안드로이드 기준으로 간단한 시험 영상을 준비해 보았습니다"
[^6]: @[00:29] "최초 앱을 실행하면 메인 하면에 하고 하단 세 개의 메뉴가 존재합니다"
[^7]: @[00:34] "첫 번째로 QR 스캔을 누리게 되면 ... 출근인 퇴근인지 여부를 묻는 팝업 ... 화면을 이동"
[^8]: @[00:40] "카메라 ... 권한 ... 획득한 후"
[^9]: @[00:59] "진행됩니다"
[^10]: @[01:02] "출근 기록에 성공하고 현재 시간을 표시"
[^11]: @[01:02] "정상적인 코드가 아닌 ... 스캔한 경우 ... 올바른 ... 팝업 처리가 표시됩니다"
[^13]: @[01:29] "백버튼 ... 취소 ... 취소 처리가 꼼꼼하게"
[^14]: @[01:49] "두 번째로 출퇴근 내력 ... 달학 형식의 화면"
[^15]: @[01:56] "화살표 ... 지난 달과 다음 달로 이동 ... 미래 ... 이동이 되지 않도록 화살표가 사라지는 처리"
[^16]: @[02:09] "이력이 없는 날짜는 기본 숫자 ... 이력이 있는 날짜는 ... 하이라이팅"
[^17]: @[02:22] "이력이 있는 날짜를 누르면 ... 정상적인 출퇴근 시간" / @[02:35] "이슈가 있는 날짜 ... 빨간색 ... 퇴근 시간이 ... 이런 식으로 표시"
[^18]: @[03:01] "마지막으로 오픈 라이수 ... 아파치 라이선스 2.0 ... 앱에 사용된 라이브러리"
[^19]: @[03:11] "라이브러리 ... 명시"
[^20]: @[03:15] "몇 시간 전에 좀 급하게 만든 앱"
[^21]: @[03:15] "서버는 없이 그냥 더미 데이터로 돌아가고 있는 ... 앱"
[^22]: @[03:35] "각 화면이라고 할 것도 사실 몇 개 없어 가지고"
[^23]: @[03:59] "찍을 당시 ... 화면에 데이터가 안 들어갔기 때문에 ... 숫자가 안 맞는 ... 이슈"
[^24]: @[04:07] "실제 앱은 ... 그렇지가 않고요"
[^25]: @[03:35] "메인 화면에서 ... 세 개 메뉴로 진입" / @[03:35] "QR 스캔 ... 권한 ... QR 스캔 기능"
[^26]: @[04:07] "조퇴한 날을 누르면은 이제 조퇴한 이력이 뜨고"
[^27]: @[04:13] "강점이라 하면은 내가 야근을 한 거를 ... 어필을 할 수가 있다"
[^28]: @[04:24] "오픈라이선스 화면도 집어넣었고 ... 권한 공지 화면이랑 버전 화면"
[^29]: @[04:38] "주제 선정 ... 얼떨결에 대답한게 ... 진행된 프로젝트" / "질문 받도록 하겠습니다"
[^30]: (정리) 본 보고서의 ‘핵심 통찰’은 원문 발언(기능/한계/강점/개선점)을 연결해 도출함: @[00:29], @[01:02], @[01:29], @[01:56], @[03:15], @[04:13], @[04:24]

← 프로젝트에서 보기