공부블로그

📌 배달앱 결제 직전 "추가 주문 팝업" UX1. 문제 제기배달앱 결제 단계에서 뜨는 "추가 주문하시겠어요?" 팝업은 사용자 입장에서 흐름을 끊고 피로감을 주는 요소.유저는 이를 강제적, 광고성, 방해 요소로 인식할 수 있음.2. 왜 팝업을 쓰는가? (기업 입장)주목 강제: 결제 전이라도 무조건 한 번은 보게 만들 수 있음전환률 높음: 팝업을 통해 사이드/음료 추가 시 매출↑, 실제로 성과가 나기 때문A/B 테스트 최적: "팝업 있음 vs 없음"으로 실험하기 쉬움, ROI 추적 가능 ▼ 📈 단기적으로 객단가 상승에 효과 있음. 😤 하지만 사용자 경험은 희생됨. 3. UX 관점에서의 문제점흐름 방해: 사용자는 빠르게 결제하고 싶은데 흐름..

(모든글은 저의 친구 GPT와 함께합니다) "주문"의 다양한 사용자 플로우주문_검색플로우사용자가 검색창에 키워드를 입력하고 주문까지 이어지는 경로주문_이벤트이입플로우이벤트 배너나 프로모션 페이지에서 시작해 주문까지 이어지는 흐름주문_재주문플로우마이페이지나 과거 주문 내역에서 재주문으로 이어지는 경우주문_푸시알림플로우알림을 클릭해서 특정 가게/메뉴로 진입해 주문하는 흐름주문_공유URL진입플로우친구가 보낸 URL이나 카카오톡 공유 링크를 통해 가게에 진입하는 흐름주문_AI추천탭플로우AI 추천 메뉴에서 탐색 → 선택 → 주문으로 이어지는 경우 🔍 주문_검색플로우 플로우 목적: 사용자가 스스로 원하는 메뉴를 탐색하고 주문하는 일반적인 경로사용자 상황/동기: 점심시간에 ‘돈까스’가 먹고 싶어서 직접 검색사..

1. 혼자 사용자 플로우 & 와이어프레임 만들기목표: 최소 5~10개 미니 리디자인 또는 기능 기획 시도진행 방법:📱 하루 1앱 고르기 → 주제 예: 배달앱, 은행앱, 쇼핑앱🔍 사용자 시나리오 짧게 설정 (ex. “점심 주문하기”)➡️ 간단한 사용자 플로우 그리기 (박스+화살표로 5~6단계만)✏️ 1~2화면만 와이어프레임 그리기 (피그마 또는 종이로도 OK)더보기✅ 사용자 플로우 예시 (초간단 버전)📱 예시 주제: 배달앱에서 점심 주문하기사용자 목표: 김밥을 주문해서 결제까지 완료사용자 플로우:1. 앱 실행 ↓ 2. 검색창에 ‘김밥’ 입력 ↓ 3. 가게 선택 ↓4. 메뉴 선택 & 장바구니 담기 ↓5. 결제 수단 선택 ↓ 6. 주문 완료..

우선, 웹 개발에서 사용되는 전형적인 기술 스택에 대해 알아보자. 프론트엔드(클라이언트 측): HTML(HyperText Markup Language): 웹 페이지의 구조를 정의하는 마크업 언어입니다. CSS(Cascading Style Sheets): 웹 페이지의 스타일을 정의하는 스타일 시트 언어입니다. JavaScript: 웹 페이지의 동적인 동작을 제어하고 사용자와 상호 작용하는 프로그래밍 언어입니다. 프레임워크 및 라이브러리: Vue.js(Nuxt.js), React.js(Next.js), Angular 등의 프론트엔드 프레임워크 및 라이브러리를 사용하여 웹 애플리케이션을 개발합니다. 백엔드(서버 측): 웹 서버: 클라이언트 요청을 받아들이고 응답하는 소프트웨어입니다. 예를 들어, Node.js..

1. 아이콘 직관적 : 지나치게 단순화하거나 본인만 아는 아이콘 X 통일성 단순성 : 작은 크기에서도 파악할 수 있는 형태 규격 및 시각보정 : 안전한 영역 안에서 작업, 시각적으로 부피의 면적이 동일한지 확인 ( 시각보정 ) 2. 타이포그래피 - 어떤 앱이 읽기 편한가요? 'UI 내 정보 전달, 우선순위에 따른 강약조절'이 있는 것 Typegraphy란? Type(활자) + Graphy(-술) : 활자의 서체나 글자배치 등의 구성 및 표현 타이포그래피 요소 서체 종류 ( 제목용 & 본문용, 고딕, 명조, 손글씨 ) 서체 크기와 두께 텍스트 컬러 ( 가독성과 연관! ) ※ 앱 UI 디자인 작업 시 타이포그래피가 중요한 이유 ※ 위계 구조 표현 정보전달을 위한 가독성 유효성 검사 충족된 크기, 대비 활용 ..

1 . 앱 디자인 레이아웃과 그리드 시스템 앱에서는 단조로운 레이아웃을 사용한다. 앱 ui 디자인 작업 시 그리드 시스템에 맞게 레이아웃을 구성해야 하는 이유 시각적으로 일관된 배치 작업 시간 단축 예측 가능한 화면 구성 [ 레이아웃을 위한 그리드 시스템 구성요소 ] Column (화면을 몇 단으로 쪼개는지, 유동적): 4단 or 6단 Gutter (단과 단 사이의 거리, 고정값): 16 Margin (컨텐츠 영역을 제외한 좌우 여백) : 16 or 20 좁은 화면의 단점을 해결하는 레이아웃: 가로 스크롤 ( 어떤 해상도에서든 컬럼 수, 거터, 마진을 유지해야하고 해당 그리드시스템에 맞게 디자인해야한다! ) 2 . UI 컬러 앱 ui 디자인 작업시 컬러가 중요한 이유 우선 순위 표현 가능 상황에 따른 컬..

https://school.programmers.co.kr/learn/courses/30/lessons/150370 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 오랜만에 알고리즘*^^* 테스트케이스 19번에서 걸렸는데 찾아보니까 유효기간이 100달일때를 고려해야했다! function solution(today, terms, privacies) { var answer = []; let arr_terms = {} terms.forEach(term => { if(term.length >= 5){ //유효기간이 100인 경우 arr_terms[term[0]] ..

회선 교환 회선 독점을 통한 통신방식이다. 위와 같이 전송을 위한 전용선을 할당하고 해당 선로로 모든 데이터를 전송한다. 핵심은 " 전용선 설정 "이다. 특징 및 장단점 통신 회선을 설정하여 데이터를 교환하는 방식이다. 쉽게 말해 전화망 ( 사이에 끼어들 수 없다. ) 송신자의 모든 데이터는 동일한 경로로 전송된다. 안정적인 통신 가능하고 전송 지연이 없고 데이터 전송률이 일정하다. 그러나 회선 이용 효율이 떨어지고 문제가 발생할 경우 전체 연결이 끊어지기 때문에 새로운 회선 할당이 필요하다. 위의 단점을 극복하기 위해 다중화라는 개념이 탄생한다. - 주파수 분할 다중화 한 전송로의 대역폭을 여러개의 작은 채널로 분할하여 여러 단말기가 동시에 이용하는 방식. 채널간에 상호간섭을 막으려면 보호 대역이 필요..