수민's 개발 이야기

NLP 프로젝트를 진행하기 위해 시각장애인을 유저로 한 앱 제작을 해야한다. 팀의 유일한 프론트엔드로서 열심히 알아보는 중이다. 스크린 리더기를 기반으로 한 프로젝트인 만큼 TTS 기본 대본 작성에 큰 힘을 쓰고 있다. 시각장애인을 위한 TTS(Text-to-Speech) 대본을 짤 때는 정보의 정확성뿐만 아니라 이해의 용이성, 흐름, 맥락 파악이 매우 중요하다. 1. 시각적 요소를 음성으로 충분히 설명하기이미지나 그래프가 있는 경우나 UI 요소를 모두 자세히 설명해야 한다. ex. “화면 좌측 상단에 로그인이 있습니다” → “첫 번째 화면 맨 위 왼쪽에는 ‘로그인’ 버튼이 있습니다.” ➡️ 진행하는 프로젝트는 챗봇 형태의 대화하는 형식이므로 이 부분은 패스. 2. 과도한 정보 압축 지양짧고 빠르게 ..

🤖 프론트엔드 개발자의 NLP 도전기 2025. 4. 15. 22:55

크롬 익스텐션을 만들면서 가장 머리가 아픈 부분은 다른 사람이 이미 만들어놓은 (정보가 부족한) 웹사이트를 뜯어보며 침투해야하는 점이다. 예전에 selenium으로 크롤링했던 능력을 살려서 🤔 웹 구조 본격 분석.. (눈이 침침해지는 기분이었다.)식품 카테고리에 포함되어있으면 이 식품에 대한 정보를 이용해야하는 구조라서 꼭 필요한 로직이었다. 👀 식품 카테고리 찾기 일단 카테고리를 먼저 찾아야 하니 하나하나 뜯어보다 breadcrumb ul요소 안에 li 안에 a에 class breadcrumb-link라는 클래스를 가진 형태로 있는 것 같았다. const breadcrumbLinks = document.querySelectorAll( "#breadcru..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 4. 11. 16:04

지금 진행하는 연구 프로젝트의 주제는 시각장애인 투자자 맞춤형 주식 AI 어드바이저 어플리케이션 개발이다. 나는 wisper AI를 이용해 음성 데이터를 추출 , 텍스트 데이터로 변환해서 LLM을 구축하는 것도 담당하지만, 유일한 프론트엔드 팀원으로서 프론트엔드 개발을 전적으로 담당해 진행하고자 한다. 😅그래서 타겟 유저가 시각장애인인 만큼 UIUX는 비장애인들이 사용하는 것과는 많이 다르다. 국제 웹 표준화 도구 W3C는 시각장애인을 포함한 모든 사용자가 웹 콘텐츠와 어플리케이션을 원활하게 이용할 수 있도록 다양한 접근성 지침을 제공하고 있다. 🖥️ 시각장애인 UIUX 국제 표준 지침- 웹 콘텐츠 접근성 지침 : WCAG (Web Content Accessibility Guidelines)    ➡..

🤖 프론트엔드 개발자의 NLP 도전기 2025. 3. 29. 22:48

⏰ 진행기간 : 2025.02.17-2025.03.13 이렇게 보면 한달 정도의 기간이 있으니 괜찮지 않은가? 라고 생각하실 수 있겠지만 이 시간 내에 기획, 디자인이 나오고 이를 개발까지 진행하기에는 매우매우 부족한 시간이었다 .. 정신없이 개발하느라 중간에 회고한건 고작 한번.. 큐스팅 벌금도 한번 내기.. 이제 밋업 프로젝트 들어가기 전에 기업프로젝트 회고를 해보면 좋을 것 같아 기업 프로젝트 과정을 돌아보고자 한다. 📁 프로젝트 소개팀원 : 기획 2 디자인 2 프론트 2 백엔드 2프로젝트 : 서울우유_지능형 세금계산서 검증 시스템 구축팀명 : 음메 팀명의 의미 : 서울우유 하면? 소! 🐄 소가 내는 소리 “음메”는 우유의 시작을 의미하는 가장 직관적인 사운드입니다 🔊 즉, 우리는 서울우유..

😃 프로젝트를 마치며.... 2025. 3. 26. 14:34

구글 코랩에서 GPU가 있는데 이걸 어떻게 쓰는거야.. 하다가 그냥 CPU를 사용했다..ㅋㅋㅋㅋ 그랬더니 어제 새벽 5시까지 돌렸는데 고작 8프로만 수행되는 최악의 일이 발생했다 ✅ 코랩의 장점- 사용하고자 하는 라이브러리를 추가 설치 필요 없이 !pip install ~ 로 쉽게 불러올 수 있다- 그래픽 카드가 필요없다 -> GPU를 제공해줘서 ML 작업이 수월하게 가능하다(그게 아니었으면 아마 노트북 터졌을거다..) 1️⃣ 런타임을 눌러 런타임 유형 변경을 누른다 2️⃣ 런타임 유형을 CPU에서 T4 GPU로 변경한다 어제 새벽 5시까지 돌려서 8%를 채웠는데 40분 돌린 지금 이미 30%가 되었다 .. GPU 최고 ..👍

🤖 프론트엔드 개발자의 NLP 도전기 2025. 3. 26. 11:55

처음 디자인을 받고 placeholder가 움직이고... 비키는게 현실적으로 가능한가?했는데 불가능은 없다 🤣 이 비현실적인 UI의 진실은 placeholder가 placeholder가 아니라는 것에 있다 😉내가 작성한 코드를 자세히 보면 움직여야할 placeholder가 안보인다.CSS와 React의 useState를 활용하여 상태에 따라 라벨 위치를 변경하는 방식으로 구현을 진행했기 때문이다. 👩🏻‍💻구현 코드  아이디를 입력하세요 setEmployeeId(e.target.value)} onFocus={() => setIsFocused(true)} onBlur={() => setIsFoc..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 3. 5. 02:47

Recoil이란? React 애플리케이션을 위한 상태 관리 라이브러리 Recoil같은 상태 관리 라이브러리를 사용해야 하는 경우1️⃣ 여러 컴포넌트에서 동일한 상태를 공유할 때 ex) 로그인 상태 , 사용자 정보 , 테마 설정 등❌ useState 사용 : 여러 컴포넌트에서 상태 공유 어려움                              : *prop drilling 이 발생할 수 있음 *prop drilling  : React에서 부모 컴포넌트의 데이터를 자식 컴포넌트로 전달할 때 중간 컴포넌트들이 불필요하게 prop을 전달해야 하는 문제2️⃣ 컴포넌트 간 상태를 동기화해야 할 때 ex) 필터 옵션 , 검색어, 사이드바 상태✅ 페이지 내 여러 섹션에서 동일한 데이터를 참조해야 한다면 Recoil을..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 2. 21. 16:55

Recoil이란? React 애플리케이션을 위한 상태 관리 라이브러리 💻첫 상태관리 라이브러리를 Recoil을 선택한 이유 : react랑 가장 사용법이 비슷해서 러닝커브가 제일 적어서 선택작고 React스러운: recoil이 React의 주요 철학인 선언적 UI, 컴포넌트 중심의 설계, 그리고 훅스를 사용하는 방식을 기반import React from 'react';import { atom, useRecoilState } from 'recoil';const textState = atom({ key: 'textState', default: '', });function TextInput() { const [text, setText] = useRecoilState(textState); const..

👩🏻‍💻frontend개발자로 성장해나가기 2025. 2. 19. 02:53