안녕하세요. 스튜디오 킹덤 클라이언트 개발자 이한나입니다. 이 글은 제가 신입으로 입사하여 3년 차인 지금까지 일하며 실수한 것들을 돌아보고 되새겨 보는 글입니다. 이 글이 저처럼 신입 또는 주니어 클라이언트 개발자분들께 작게나마 도움이 되기를 바라며 저의 경험을 나누고자 합니다.일하다 보면 종종 내가 이해한 것과 기획자가 의도하는 방향이 다른 경우가 생깁니다. 확신이 가지 않는 부분은 당연히 물어봐야 합니다. 설계를 하고 있을 때, 작업을 진행하고 있을 때, 작업을 완료 했을 때까지, 늦었다고 생각할 때가 가장 빠른 질문 타이밍입니다."10번 뽑기 기능"을 만드는 상황을 예시로 들어보겠습니다.여기서 질문을 하지 않는 개발자가 1번 뽑기를 10번 반복하는 것으로 이해하고 (음! 전부 이해했어!) 작업을 진행합니다.그리고 마감날이 되어 테스트를 돌려본 기획자가 물어봅니다.기획자 : 이거 뽑기 10번을 전부 보여주고 있네요? 뽑기는 1번만 보여주고 보상을 10개를 줘야 하는데 다르게 나오는 것 같아요. 확인 부탁드립니다.그동안의 시간과 노력을 지우고 다시 작업을 하는 상황이 되어버렸습니다. 눈물을 머금고 다시 작업을 하고 싶지 않다면 자신이 이해한 것 그리고 작업 방향이 기획자가 의도하는 방향과 맞는지 물어보고, 기록하고, 작업을 진행하도록 합시다.추가로 작업하면서 중간중간 결과물을 영상으로 찍거나 스크린샷으로 캡쳐해 공유합시다. 구현 방향을 공유하는 의미도 있고, 나중에 리팩터링하거나 기능이 추가될 때 원본 기능이 어땠는지 참고하기 좋아서 기록 차원에서라도 남겨두는 게 좋습니다. 그리고 귀여운 작업물을 만들었다면 자랑할 수 있다는 장점도 있습니다.다른 프로그래머의 코드를 수정할 때도 비슷합니다. 코드에는 의도와 맥락이 있습니다. 왜 이런 코드가 있는지 물어보고 의도에 맞는 방향으로 작업해 야 합니다. 그리고 수정 방향에 대해 얘기하다 보면 생각지 못한 더 좋은 코드가 떠오르거나 어딘가에 있는 동일한 코드를 가져다 쓸 수 있음을 알게 될 수 있어서, 어떤 코드에 대해 수정이 고민이 된다면 담당 프로그래머와 얘기해 보는 것이 좋습니다.데이터 수정은 기획자에게 요청하자"쿠키런: 킹덤"에서는 기획자가 퀘스트 내용이나 쿠키의 능력치 같은 게임 데이터를 작업합니다. 적은 양의 데이터 수정일지라도 어떤 데이터는 서로 연결되어 있어 규칙에 맞게 입력해야 하고, 또 그 데이터를 수정하고 번역 요청을 하는 등 관리가 필요합니다. 따라서 데이터 수정은 담당 기획자에게 요청하는 것이 가장 안전합니다. (담당자한테 물어보자는 위 문단의 내용과도 유사합니다.)네트워크 환경이 항상 최선의 상태가 아닐 수 있음을 고려하자예를 들어서, 클라이언트는 서버와 통신을 할 때, 클라이언트가 서버에 보내는 모든 요청이 실패할 수 있음을 고려해야 합니다. 유저의 네트워크 환경이 다양하기 때문입니다. 요청이 실패하면 경우에 따라 유저가 말을 걸어도 NPC 가 반응을 하지 않는 등 의도하지 않게 게임에 갇힐 수 있습니다. 그래서, 요청이 실패했을 때 화면이 어떻게 나와야 하는지, 다

• None 핵심 기술은? CLIP을 통한 이미지 임베딩• None 어떻게 만들었을까요?• None 예시 결과를 살펴볼까요?안녕하세요! 검색서비스팀에서 최근에 개발 중인 프로젝트를 소개하려고 합니다. 바로 “음식 사진을 넣으면 유사한 맛집 사진을 찾아주는 AI 시스템” 입니다.요즘 맛집을 찾을 때 사진 검색이 꽤 중요하다는 사실, 공감하실 겁니다. 그런데 먹고 싶은 음식은 있는데 어디서 파는지 모를 때는 어떨까요?예를 들어, “이 음식 진짜 맛있어 보이는데, 어디서 먹을 수 있지?” 라는 생각이 드는 순간, 그 사진을 넣기만 하면 비슷한 메뉴를 파는 식당을 추천해주는 AI가 있다면 정말 편리하겠죠.이런 니즈에서 출발해, 음식 사진 기반 맛집 검색 시스템을 개발하게 되었습니다.실제 사용 시나리오는 다음과 같습니다.• None 사용자가 음식 사진 한 장을 업로드합니다.• None 시스템이 유사한 맛집 이미지들을 찾아서 보여줍니다.• None 사용자는 이미지 결과를 보고, “오! 내가 딱 원하던게 여기에 파네! 여기 가야겠다” 하고 결정할 수 있습니다.핵심 기술은? CLIP을 통한 이미지 임베딩CLIP이란 무엇인가요?• None CLIP(Contrastive Language–Image Pretraining)은 OpenAI에서 발표한 모델로, 이미지와 텍스트를 동일한 임베딩 공간에 매핑할 수 있는 강력한 특성을 가지고 있습니다. 이 특성 덕분에 CLIP은 "이미지 검색", "텍스트-이미지 매칭", "멀티모달 분류" 등 다양한 작업에 활용됩니다.CLIP의 구조는 아래와 같습니다.• None 이미지 인코더: 주로 Vision Transformer (ViT) 또는 ResNet이 사용됩니다.CLIP은 다음과 같은 방식으로 학습됩니다.• None 대규모 웹 데이터 수집: 인터넷에서 수집된 수억 개의 (이미지, 캡션) 쌍을 학습 데이터로 사용합니다.• None 쌍별 유사도 학습 (Contrastive Learning): 이미지와 텍스트를 각각 임베딩한 후, 정답 쌍은 서로 유사하게, 나머지는 멀리 떨어지도록 학습합니다.• None 멀티모달 임베딩 공간 매핑: 학습을 통해 이미지와 텍스트가 같은 의미를 공유할 경우, 두 임베딩이 가까운 위치에 오도록 매핑됩니다.이 시스템에서는 CLIP의 이미지 임베딩 기능만 사용했습니다.즉, 텍스트는 사용하지 않고, 다음과 같은 흐름으로 진행했습니다• None 음식 이미지와 맛집 이미지 모두 CLIP의 이미지 인코더를 통과시켜 임베딩 벡터로 변환합니다.• None 벡터 공간상에서 사용자 이미지와 가장 가까운 맛집 이미지를 코사인 유사도 기준으로 검색합니다.• None 유사 이미지에 연결된 맛집 정보를 기반으로 사용자에게 식당을 추천합니다.CLIP은 학습 과정에서 이미지의 "의미"를 추상화해서 인코딩하기 때문에, 단순한 픽셀 유사도보다 훨씬 더 의미론적 유사도(semantic similarity) 를 잘 포착할 수 있습니다.예를 들어, 두 라멘 사진이 촬영 각도나 조명은 다르지만 “빨간 국물 + 파 토핑”이라는 시각적 패턴이 비슷하다면, CLIP은 이를 높은 유사도로 인식해줍니다.이처럼 CLIP은 단순한 이미지 분류기와는 달리, 이미지 간 의미적 관계까지도 이해하고 비교할 수 있는 강력한 멀티모달 모델입니다.이번 프로젝트에서도 그런 특성이 유사한 음식 사진을 정확하게 찾아주는 데 큰 역할을 했습니다.어떻게 만들었을까요?대략적인 구조는 다음과 같습니다. 음식 이미지와 위치 정보를 바탕으로, 사전 임베딩된 데이터에서 시각적으로 유사하면서도 반경 내에 위치한 음식 이미지를 검색한 뒤,해당 이미지에 연결된 메타데이터를 활용해 실제 식당 정보를 추천합니다.서비스의 기반이 되는 데이터는 내부적으로 보유한 맛집 데이터셋입니다. 맛집에 매칭되는 음식 이미지에 다음과 같은 정교한 메타데이터를 함께 연결해 저장했습니다• None 이미지가 소속된 식당의 고유 ID• None 음식점의 위도 및 경도 좌표음식 이미지를 이해하고 비교하기 위해 OpenAI의 CLIP-ViT-B/16 모델을 사용했습니다.이 모델은 이미지 하나를 입력받으면 512차원의 벡터(임베딩)으로 변환해주며, 이 벡터는 그 이미지의 시각적 특징을 압축해 표현하고 있습니다.예를 들어, 김치찌개 사진을 넣으면 [0.043, -0.112, 0.201, ..., -0.038] 처럼 변환되고 이 벡터는 김치찌개의 비주얼적인 특징인 붉은 국물색, 고기와 채소의 배치등을 담고 있습니다.이러한 방식으로 openai/clip-vit-base-patch16 모델을 사용해, 내부적으로 보유한 모든 음식 이미지에 대해 사전에 임베딩 벡터를 생성해두었습니다.사용자가 이미지를 업로드할 때마다 보유한 모든 음식 이미지와 하나씩 비교하는 방식은 계산량이 선형적으로 증가하기 때문에, 데이터가 많아질수록 성능 저하가 급격하게 발생합니다.예를 들어, 10,000장의 음식 이미지가 있다면 단 한 장의 쿼리 이미지를 비교하기 위해도 10,000회의 유사도 계산이 필요합니다.이를 해결하기 위해 사전에 모든 이미지에 대해 임베딩을 생성한 뒤, 고속 유사도 검색을 지원하는 FAISS 라이브러리를 사용해 다음과 같이 모든 음식점 이미지에 대해 색인하는 과정을 거쳤습니다.• None 사전 수집된 음식 이미지 데이터셋의 각 이미지를 CLIP 모델에 입력합니다.• None 각 이미지에 대해 512차원 임베딩 벡터를 생성합니다. (이 벡터는 이미지의 시각적 특징을 압축 표현한 것으로, 다른 이미지와의 유사도를 계산할 수 있는 기준이 됩니다.)• None 모든 임베딩 벡터를 FAISS의 인덱스 객체에 추가하여, 벡터 검색 인덱스를 구성합니다.이렇게 구축된 인덱스를 통해, 사용자는 쿼리 이미지 한 장만 업로드해도 수천~수만 개의 음식 이미지 중에서 가장 유사한 후보를 빠르게 검색할 수 있게 됩니다.이미지 임베딩과 FAISS를 이용해 시각적으로 유사한 음식 이미지를 검색할 수 있게 되었지만, 한 가지 문제가 남아 있었습니다. 바로 지역과 관계없는 음식이 추천될 수 있다는 점입니다.예를 들어 사용자가 서울 강남에 있으면서 마라탕 사진을 업로드했는데, 부산에 있는 마라탕

데이터와 AI 기반 서비스를 개발하며 느낀 것 중 하나는, AI의 발전 속도가 우리의 상상을 뛰어넘는다는 점입니다.특히 최근 LangChain Academy에서 공개한 'Building Ambient Agents with LangGraph' 강좌를 살펴보며, AI 에이전트의 패러다임이 완전히 바뀌고 있음을 실감했습니다.챗봇에서 앰비언트로, 패러다임의 전환우리가 지금까지 알던 AI 에이전트는 대부분 챗 인터페이스 기반의 일회성 상호작용이었습니다.질문하면 답하고, 요청하면 처리하는 방식이죠. 하지만 이제는 다릅니다.Ambient Agents는 말 그대로 '주변 환경'에서 자율적으로 작동하는 에이전트입니다.Slack 메시지가 오면 자동으로 분석하고, GitHub 이슈가 생성되면 스스로 처리 방향을 결정하며,이메일함을 지속적으로 모니터링하여 중요한 메일을 분류하고 응답까지 준비합니다.제가 직접 개발한 여러 서비스들을 운영하면서 느낀 점은, 반복적이고 패턴화 된 작업들이 생각보다 많다는 것입니다.고객 문의 분류, 데이터 전처리, 보고서 생성 등... 이런 업무들을 사람이 계속할 필요가 있을까요?⚙️ 앰비언트 에이전트의 핵심 특징기존 에이전트: "이메일 정리해 줘" → 처리 → 끝앰비언트 에이전트: 새 이메일 감지 → 자동 분석 → 중요도 판단 → 적절한 조치단순한 질답이 아닌, 며칠에 걸친 프로젝트 관리도 가능합니다.예를 들어, 고객의 요구사항을 분석하고, 관련 팀원들과 협의하며, 최종 결과물까지 추적하는 전 과정을 자율적으로 수행할 수 있죠.하나의 에이전트가 아닌, 수천 개의 전문화된 에이전트들이 백그라운드에서 각자의 역할을 수행합니다.마치 잘 조직된 회사의 각 부서처럼 말이죠.왜 인간의 개입이 여전히 중요한가?여기서 중요한 점은 '앰비언트'가 '완전 자율'을 의미하지 않는다는 것입니다.실제 서비스를 운영해 보면 알겠지만, 아무리 정교한 AI라도 100% 완벽할 수는 없습니다.특히 민감한 업무(이메일 발송, 고객 응대, 결제 처리 등)에서는 인간의 최종 승인이 필수적이죠.LangGraph가 제공하는 Human-in-the-loop 시스템은 다음과 같은 방식으로 작동합니다.• None 행동 승인/거부: "이 이메일을 정말 보낼까요?"• None 도구 호출 수정: "API 호출 전에 파라미터를 확인해 주세요"• None 명확성 질문: "이 고객의 의도가 A인가요 B인가요?"• None 상태 재검토: "현재 진행 상황이 올바른 가요?"이런 상호작용을 통해 결과 품질 향상, 신뢰도 증진, 에이전트 학습 및 성능 개선이 가능합니다.LangGraph는 단순한 프레임워크를 넘어 대규모 에이전트 운영을 위한 완전한 인프라를 제공합니다.• None 퍼시스턴스 레이어: 에이전트의 상태를 지속적으로 저장하고 관리• None 확장성: 급증하는 작업량에도 유연하게 대응• None 메모리 시스템: 피드백을 학습하고 점진적으로 개선제가 노코드 도구들로 서비스를 구축할 때 항상 고민되는 부분이 확장성과 안정성이었는데, LangGraph는 이 문제를 근본적으로 해결해 주는 것 같습니다.✉️ 실전 예제: 이메일 관리 앰비언트 에이전트강좌에서 다루는 이메일 관리 에이전트는 정말 실용적인 예제입니다.• None 기본 LangGraph 설정 - 에이전트의 기본 구조 구축• None Langsmith 평가 - 에이전트 성능 측정 및 개선• None 고객 불만 메일 즉시 에스컬레이션창업자 관점에서 본 Ambient Agents의 가능성데이터 기반 서비스를 여러 개 운영하면서 느낀 것은, 반복 업무의 자동화가 곧 경쟁력이라는 점입니다.• None 24/7 서비스: 인간의 근무시간에 구애받지 않는 지속적 서비스• None 일관된 품질: 감정이나 컨디션에 영향받지 않는 안정적 결과• None 확장성: 고객 증가에 따른 선형적 비용 증가 방지• None 데이터 활용: 축적된 패턴을 바탕으로 한 지능적 판단• None 통합 관리: 여러 시스템을 아우르는 통합된 워크플로우⏭️ 앞으로의 전망과 준비 방향AI 모델의 성능이 7개월마다 두 배씩 향상되고 있다는 것은, 우리가 상상하는 것보다 훨씬 빠르게 변화가 올 것이라는 의미입니다.앞으로 아래 내용을 바탕으로 미래를 위해 전략적으로 준비하고 공부하려고 합니다.• None 데이터 품질 관리: 에이전트 학습을 위한 양질의 데이터 준비결론적으로, Ambient Agents는 단순한 기술적 진보가 아닌 일하는 방식의 근본적 변화를 의미합니다.이제 우리는 AI와 협업하는 것이 아니라, AI가 우리를 위해 일하는 시대로 접어들고 있습니다.이 변화의 물결에 뒤처지지 않으려면, 지금부터라도 LangGraph와 같은 최신 기술을 학습하고 실제 프로젝트에 적용해 보는 것이 중요하다고 생각합니다.여러분도 곧 수많은 AI 에이전트들이 백그라운드에서 묵묵히 일하며, 정말 중요한 창의적 업무에만 집중할 수 있는 그런 미래를 경험하게 될 것입니다.

Flutter에는 다양한 상태 관리 라이브러리가 존재합니다. 대표적으로 Provider와 GetX, BLoC 등이 있는데요. 이전에 Flutter 인기 아키텍처 라이브러리 3종 비교 분석 - GetX vs BLoC vs Provider라는 글에서 이들 라이브러리의 고유한 특징과 장단점을 비교해 봤습니다.이번 글에서는 최근 인기를 얻고 있는 Riverpod을 소개하려고 합니다. Riverpod은 기존 Provider 라이브러리의 한계를 보완하기 위해 개발된 라이브러리로, 더 유연 하면서 강력한 기능을 제공해 개발자가 보다 쉽게 상태를 관리할 수 있도록 돕습니다. 먼저 Riverpod을 소개하고, Riverpod의 특징과 응용법, 유의할 점을 알아보면서 공식 사이트에는 없는 저만의 몇 가지 사용 기법을 공유하겠습니다.'상태'란 앱의 현재 상태를 나타내며, 다음과 같은 요소들이 상태에 해당합니다.상태 관리는 앱의 복잡성과 사용자 경험에 직접적인 영향을 미칩니다. 잘못된 상태 관리는 앱의 성능 저하, 예기치 않은 오류, 복잡한 디버깅 과정을 초래할 수 있습니다. 따라서 올바른 상태 관리 도구를 선택하는 것은 매우 중요한데요. 일반적으로 상태 관리 라이브러리는 다음과 같은 기능을 제공합니다.Riverpod을 처음 접하는 독자들을 위해 간단한 사용법부터 소개하겠습니다. Flutter에서 새 프로젝트를 생성하면 아래와 같은 ‘버튼을 클릭하면 숫자가 증가하는 간단한 앱’이 기본 샘플로 제공되는데요. 이렇게 제공되는 기본 코드와 Riverpod을 이용해 구현한 코드를 비교해 보겠습니다.아래 코드는 샘플 앱 생성 시 자동으로 생성되는 코드입니다.다음은 Riverpod으로 같은 예제를 구현한 코드입니다. 먼저 상태를 관리할 를 정의하고, 이를 화면(view)에서 사용하면 됩니다. 개발자가 정의한 의 생명 주기는 Riverpod이 자동으로 관리해 주기 때문에 개발자는 따로 신경 쓸 필요 없이 코드 작성에만 집중하면 됩니다.Riverpod만의 특징Riverpod의 사용법을 간단히 살펴봤는데요. 다음으로 다른 상태 관리 라이브러리와는 다른 Riverpod만의 특징을 소개하겠습니다.다른 상태 관리 라이브러리와 다르게 Riverpod은 서버에서 데이터를 가져와 출력하는 애플리케이션 구현에 초점을 두고 있으며, 이를 위해 아래와 같은 기능을 제공합니다.• 서버나 외부 모듈에서 데이터를 가져오는 동안 로딩 상태를 표현함• 한 번 불러온 데이터의 재사용과 유효 기간 설정다른 상태 관리 라이브러리는 위와 같은 기능을 구현하려면 별도의 상태를 기록하거나 로직을 작성해야 하는데요. 반면 Riverpod에서는 이런 기능들을 기본적으로 제공하고 있기 때문에 반복적인 코드 작성을 줄일 수 있습니다. 이는 개발 생산성을 높일 뿐 아니라 테스트할 항목도 줄이고 유지 보수 부담도 줄여 줍니다.Riverpod은 사용자가 작성한 의 생명 주기와 데이터 참조를 관리해 줍니다. 어디에서든 의 데이터를 필요로 할 때 이를 알아서 연결해 줍니다. 따라서 개발자는 복잡한 순서를 신경 쓸 필요가 없습니다. 또한 계층 구조가 아니기 때문에 가 특정 화면 구조에 묶여 있지 않습니다.지금부터는 공식 사이트에도 없는 활용 방법을 소개해 드리고자 합니다. 이를 위해 예시로 글 목록과 상세 화면이 있는 SNS 앱을 만들었는데요. 이 앱에서는 , , , 이렇게 총 세 개의 를 생성합니다.• : 글 목록에서 글쓴이로 검색하거나, 즐겨찾기 항목만 볼 수 있도록 필터를 제공합니다.• : 서버에서 글 목록을 불러와 화면 객체에 전달합니다. 리스트에서 특정 글에 대해 즐겨찾기 기능을 제공합니다.• : 서버에서 글의 상세 내용을 불러와 화면 객체에 전달합니다. 즐겨찾기 기능을 제공합니다.글 목록 화면에서 상단의 필터 조건이 변경되면 자동으로 글 목록을 새로 받아와 업데이트하도록 만들 수 있습니다. 즉, 글 목록 필터를 조작하는 코드를 일일이 찾아서 를 하는 기능을 넣을 필요가 없습니다.글의 상세 화면으로 이동할 때 이미 불러온 내용은 로딩 없이 먼저 표시할 수 있습니다.네트워크 상태에 따라 온라인과 오프라인 데이터를 유연하게 결합해 사용자에게 끊김 없는 화면을 제공하고, 오프라인 환경에서도 안정적으로 작동하는 앱을 구현할 수 있습니다.글의 상세 화면에서 업데이트된 데이터가 글 목록에도 반영되게 만들 수 있습니다.간단한 기능이라면 위와 같이 구현해도 되지만, 위 구조는 잠재적으로 문제가 발생할 수 있습니다. 즐겨찾기 기능이 있는 화면이 추가될 때마다 기존에 작성한 도 수정해야 하기 때문입니다. 기능이 추가될 때마다 기존 기능에 부작용이 생길 수 있는 구조는 좋은 구조가 아니므로, 아래와 같이 공통 부분을 분리해 를 추가로 생성하는 구조로 만드는 것이 좋습니다. 이곳에서는 글 목록 불러오기, 글 상세 불러오기, 즐겨찾기를 제공합니다.다음으로 Rivepod 사용 시 유의해야 할 점 세 가지를 알아보겠습니다.간 참조가 많아질수록 코드가 복잡해질 수 있습니다. 이는 유지 보수를 어렵게 만들 수 있으며, 특히 새로운 개발자가 프로젝트에 참여할 때 이해하기 어렵게 만들 수 있습니다. 따라서 를 설계할 때에는 가능한 한 단순하게 유지하는 것이 좋습니다. 각 의 책임이 명확해지도록 설계하고, 불필요한 참조를 최소화해 복잡성을 줄이는 게 좋습니다. 이와 관련해 두 가지 원칙을 적어 봤습니다.• Provider 간 참 조는 되도록 한 방향으로만 이뤄지도록 합니다. 예를 들어 즐겨찾기 가 사용자 프로필 를 참조한다면 반대 방향의 참조는 피합니다.• 양방향 참조가 필요하다면 중앙에서 상태를 관리하는 중간 를 만드는 것을 고려합니다. 앞서 '응용하기 4: 화면 간 데이터 동기화'가 그 예제입니다.안에서 를 사용할 때에는 성능 이슈를 고려해야 합니다. 너무 많은 는 잦은 데이터 로딩을 발생시켜 성능을 저하할 수 있습니다. 예를 들어 리스트 화면을 보고 있지 않아도 리스트가 여러 번 업데이트되는 경우가 발생할 수 있으니 필요한 부분에서만 상태를 구독하도록 설계해야 합니다.다중 사용이 불가피한 경우에는 나 을 적절히 사용해 이를 회피할 수도 있습니다.• : 지정된 시간 동안 새로운 이

시각장애인 전용 얼굴 인증 화면을 만든 이유토스에서는 송금이나 결제를 할 때 이상 거래가 감지되면, 보안을 위해 기능이 일시적으로 차단돼요. 이때 얼굴 인증으로 본인 확인을 해야 차단이 해제되죠. 대부분 사용자에게 얼굴 인증은 몇 초 만에 자연스럽게 지나가는 과정일 수 있지만, 시각장애인 사용자에게는 전혀 다른 경험일 수 있어요.정확한 지시 없이 카메라를 바라보며 시선을 고정하는 건 쉬운 일이 아니거든요. 다른 사람이 옆에서 “왼쪽으로 조금 더 고개 돌려보세요” 등의 도움을 줘야만 인증을 마칠 수 있는 경우가 대부분이었죠. 인증 없이는 송금 등 주요 기능을 사용할 수 없기 때문에, 시각장애인이 도움 없이 혼자서 인증 할 수 있는 환경을 만드는 건 꼭 필요한 일이었어요.그래서 인증팀과 논의 끝에 스크린리더 사용자 전용 얼굴 인증 과정을 따로 만들기로 했어요. 시각장애인 사용자를 직접 초대해 UT를 진행했고, 계속 이터레이션하며 새로운 흐름을 설계했죠.이 글에서는 UT에서 발견한 점을 시안에 어떻게 적용해갔는지 하나씩 소개해볼게요.얼굴 인증은 안내에 따라 여러 방향으로 고개를 돌리고, 몇 초간 가만히 있어야 해요. 처음에는 고개 돌리는 동작이 어렵지 않을까 싶어, 자세한 텍스트 안내를 준비했는데요. 막상 테스트해보니 대부분의 사용자가 무리 없이 잘 따라 하셨어요.문제는 그다음이었어요. 지금 얼굴이 제대로 인식되고 있는지, 내가 잘 하고 있는지 알 수 없다는 점이었죠. 기존 화면에서는 프로그레스 바로 진행 상태를 시각적으로만 안내하고 있었기 때문에, 스크린리더 사용자 입장에선 현재 상태를 파악하기 어려웠어요.단순히 숫자를 읽어주는 방식보다는, 프로그레스 바처럼 시각적인 요소를 청각적으로 더 직관적으로 전달하는 게 중요하다고 생각했어요. 그래서 ‘진행 중’ 사운드와 ‘완료’ 사운드를 인증 흐름의 각 단계에 삽입했어요.사용자들은 진행 과정에서 큰 불안 없이 훨씬 더 수월하게 따라올 수 있었어요. 청각 UX란 단순히 텍스트를 소리로 읽어주는 것을 넘어, 시각적으로 의미 있는 모든 피드백을 ‘소리’로 전환하는 일이라는 점을 다시금 실감할 수 있었죠. 이번 얼굴 인증 접근성 개선의 핵심도 바로 여기에 있었어요. 처음엔 텍스트만 읽히면 충분하다고 생각했지만, 실제로는 프로그레스 바와 같은 그래픽 요소에도 중요한 정보가 담겨 있었죠. 이 시각적 정보를 사운드로 ‘번역’하면서 비로소 사용자에게 직관적으로 느껴지는 UX를 구현할 수 있었어요.기존 얼굴 인증 플로우는 30초 동안 얼굴 인식에 실패했을 때, ‘다시찍기’ 버튼을 눌러야 해요. 그런데 UT 중 시각장애인 사용자가 이 버튼을 찾기 위해 화면을 더듬다가 자세가 흐트러지고, 다시 얼굴을 맞추기 어려워져 인증을 실패하는 경우가 있었어요.그래서 이 흐름을 바꿔보기로 했어요. 오류 피드백은 “얼굴이 원을 벗어났어요”처럼 간단한 토스트 메시지로 전달하고, 곧바로 다시 안내가 이어지도록 구성했어요. 버튼을 누르지 않아도 흐름이 자연스럽게 이어지도록 한 거죠. 사실 오류 메시지만 정확히 전달된다면, 굳이 버튼을 누

Apache Airflow가 3.0 버전으로 올라가면서, 기존의 FAB(Flask App Builder) 기반 UI에서 React 기반 UI로 전면 개편되었습니다.이 과정에서 여러 흥미로운 기능들이 추가되었는데요,이번 글에서는 그 중 하나인 i18n 기능과, 한국어 번역 기여 가이드에 대해 소개해드리겠습니다.Airflow의 i18n(Internationalization) 프로젝트는 Airflow의 웹 UI를 다양한 언어로 번역할 수 있도록 국제화를 지원하는 작업입니다.이 프로젝트는 문자열을 모국어로 변경하는 것 이상으로, 다음과 같은 목표를 가지고 있습니다:• None 글로벌 커뮤니티 활성화: 다양한 언어권 기여자들의 참여 유도• None 번역 품질 유지: 일관된 용어와 구조를 유지해 지속 가능성 확보현재 Airflow는 영어를 기본 언어(default locale)로 사용하며, 각 언어별 JSON 파일을 통해 다양한 locale을 지원하고 있습니다.한국어도 공식적으로 지원되는 locale 중 하나이며, 지속적인 기여가 필요한 상황입니다.Airflow의 UI 번역에 기여하려면 로컬 환경에서 번역 파일을 수정하고, 실제 UI에서 어떻게 보이는지 테스트해볼 수 있어야 합니다.이를 위해 Airflow에서는 공식 개발 툴인 Breeze를 사용합니다.Breeze는 Docker Compose 기반으로 작동하므로, 사용 전에 Docker 환경이 실행 중이어야 합니다.• None 옵션을 통해 코드 수정을 핫 로드 가능하도록 합니다.※ 위 옵션들은 필요에 따라 수정 가능합니다.명령어를 실행하면 아래와 같이 나올 것입니다.그럼 으로 Airflow UI에 들어가서 , 으로 로그인 해줍니다.좌측 하단의 User > Select Language 를 통해 UI를 한국어로 변경할 수 있습니다.그럼 이제 번역 기여 방법에 대해서 알아봅시다.Airflow의 번역은 단순히 "PR을 열고 번역을 올린다"는 것만으로 끝나지 않습니다.공식 정책에 따라 책임자, 승인자, 검수 절차 등이 세분화되어 있어, 기여 전에 몇 가지 구조를 이해해두면 좋습니다.Airflow UI 한국어 번역 파일은 다음 경로에 위치합니다:여기에 각 UI 텍스트에 해당하는 key-value 형태의 JSON이 있으며, "value" 부분을 번역하는 것이 저희의 역할입니다.만약 새로운 UI 문자열이 추가되면, 한국어 번역 파일에도 해당 키가 추가 되며, 로 표시되어, 번역이 필요한 항목을 쉽게 찾을 수 있습니다:이러한 항목들을 찾아 번역하고 PR을 보내는 것이 가장 기본적인 기여 방법입니다.Airflow에 누락된 번역을 자동으로 검사하고, TODO 항목을 추가해주는 도구가 있습니다.이 명령어를 실행하면 아래와 같은 결과가 출력됩니다:각 파일별로 어떤 항목이 누락되었는지, 파일별 번역 진행률이 얼마인지도 확인할 수 있습니다.이 명령어를 통해 를 생성할 수 있으니, 새로운 UI 문자열이 추가되면 해당 명령어를 실행해주어야합니다.그리고 번역을 하면서 몇 가지 팁이 있자면:• None Breeze 환경에서 직접 UI를 띄워 번역이 어떻게 반영되는지 테스트해보세요.• None 영어를 직역하기보다는 자연스럽고 사용자 친화적인 표현이 중요합니다.• None 이나 등 형식 요소는 반드시 그대로 유지해주세요.• None 한 PR에서 너무 많은 항목을 다루기보다는, 관련한 항목끼리 묶어서 올리는 것이 좋습니다.• None 가능하면 기존에 번역보다 TODO: 로 표시된 항목을 번역하는 것이 우선입니다.• None PR 설명에는 어떤 항목들을 번역했는지 간략하게 명시하면 좋습니다.• None 번역시 일관된 용어 사용을 위해 기존 번역 예시를 참고해주세요.Airflow의 i18n 정책에 따르면, 모든 번역 PR은 다음 조건을 충족해야합니다.• None 해당 언어의 Translation Owner가 언어적 측면을 승인해야 합니다.• None Code Owner 또는 커미터가 기술적 측면(포맷, 린트 등)을 확인하고 병합합니다.따라서 PR을 하실 때, 아래와 같이 저희를 태그해서 진행해주시면 더욱 빠른 리뷰에 도움이 됩니다!번역은 기여를 시작하는 데 가장 부담이 적은 방법 중 하나입니다.하지만 단순한 작업 그 이상으로, Airflow의 기여 방식과 문화를 체험하는 가장 좋은 기회이기도 합니다.처음엔 작은 오타 하나, 하나의 문장을 자연스럽게 고치는 것부터 시작해보세요.혹시 기여를 하고 싶은데 어려움이 있다면,이 게시글 댓글을 통해 언제든지 편하게 질문해주세요!