전체 글5 교회 대학부 주보 웹앱, ‘멍에’ 사용성 테스트(Usability Test) 진행 후기 '멍에' 는 웹앱 기반 대학부 주보로매주 친교와 광고, 그리고 그 주의 특별한 소식을 전하는 소통 창구로 활발히 사용되고 있는 서비스예요. 이 글은 ‘멍에’의 불편한 점을 찾고 새롭게 기획하는 과정에서 진행했던 사용성 테스트(UT) 후기를 정리한 글입니다. 목차사용성 테스트(UT, Userbility test) 란?‘멍에’에서 UT를 진행하게 된 배경과 목적사용성 테스트 시행 과정 사용성 테스트 결과 및 분석 사용성 테스트에서의 아쉬운 점 1. 사용성 테스트(UT, Userbility test) 란 사용성 테스트는 출시 이전에 MVP 단계에서 기능이 의도한 대로 사용되고 있는지 확인할 수 있어요. 사용성 테스트의 설문은 참가자가 상황에 이입해서 Task를 수행할 수 있도록 구체적인 상.. 2026. 3. 9. React 에서 멀티 스텝 폼 구현하기 [Problem] 요구사항 정리 React에서 폼을 구현하는 방법에 대해서 적용한 것들을 정리한 글입니다. 우선 저희 프로젝트의 폼 디자인입니다. 처음에는 form 페이지 하나에서 step 별로 컴포넌트를 나눠서 이전, 다음 버튼을 누르면 그때의 step의 컴포넌트를 렌더링하도록 구현했습니다. 따라서 중간에 step 1 ~ step 4는 페이지가 아니라 컴포넌트 였습니다. 이때는 상태관리에 대해 아무런 계획도 세우지 않은 채 겉모습만 똑같이 만드느라 급급했던 것 같네요.. 이후 디자인 팀과 1차 QA를 진행했는데, 아래와 같은 요구사항이 나왔습니다. ✅ 디자인팀에서 준 요구사항 위시풀 Progress바의 단계 레이블을 누르면 해당 단계로 화면이 이동했으면 좋겠어요 위시풀 만들기 ‘최종점검’ 에서 .. 2025. 10. 5. MUI에서 적용되는 CSS customize 방법들 MUI 에서는 기본적으로 여러 컴포넌트를 제공해주는데, 내 프로젝트에서는 추가적으로 customize를 해야한다! 색, 크기 등! Material UI Components 를customize 하기 위한 방법들!MUI에서는 Emotion을 기반으로 한 style 기법을 사용한다. css 관련한 sx, theme 등 모두 emotion 엔진 위에서 돌아간다. Emotion CSS 란? CSS-in-JS 로, .css 파일을 따로 만들어서 css를 적용하는 것이 아닌, js 파일 안에서 style을 적용할 수 있게 하는 라이브러리이다. 여기서 Emotion CSS랑 내가 알고 있던 styled-component, Tailwind CSS의 차이가 궁금해졌다. 다음에.. 출처: https://mui.co.. 2025. 4. 24. [Mungae] 프로젝트 구조 best practices 조사 0. 프로젝트 시작 전, 폴더 구조를 잘 짜야 하는 이유 폴더 구조는 코드의 가독성과 유지보수성을 높이는 데 중요한 역할을 한다. 나중에 파일을 어디에 저장해야 할지 어려워진다. 폴더 구조의 기본 원칙 폴더 구조 설계 시에는 기능별로 폴더를 나누는 것이 좋다.폴더 이름은 기능을 명확히 나타내야한다. 폴더 구조를 설계할 때는 다른 개발자들과의 협업을 고려해야 한다. 확장성을 고려해야 한다. 1. 흔하게 볼 수 있는 폴더 아키텍쳐 src/├── assets/ ├── components/ ├── hooks/ ├── pages/ ├── router/ ├── services/ hooks프로젝트에서 사용하는 커스텀 hook을 저장한다. 커스텀 hook을 .. 2025. 4. 14. Langchain - LLM chain 출처:https://wikidocs.net/231156 1-2-1. 기본 LLM 체인 (Prompt + LLM)기본 LLM 체인(Prompt + LLM)은 LLM 기반 애플리케이션 개발에서 핵심적인 개념 중 하나입니다. 이러한 체인은 사용자의 입력(프롬프트)을 받아 LLM을 통해 적절한 …wikidocs.net 1. 기본 LLM 체인기본 LLM 체인이란 사용자의 프롬프트를 받아 LLM을 통해 응답을 생성하는 구조. from langchain_openai import ChatOpenAIfrom langchain_core.prompts import ChatPromptTemplatefrom langchain_core.output_parsers import StrOutputParser# prompt + mode.. 2024. 7. 10. 이전 1 다음
