본문 바로가기

분류 전체보기

[OPIc] IM 시리즈 정리 01 * 본 내용은 유튜브 오픽노잼 님의 강의 내용을 바탕으로 작성되었습니다.* 블로그 내용만 보는 것보단 영상을 함께 보시는 것을 무조건 추천합니다.https://www.youtube.com/watch?v=Urq4VO63X24&list=PL9Ieg7fw1BJKxNwPU3G2hdpM75nGIwyAB&index=1ep. 01IH로 가기 위한 답변 원칙 5가지1. 되묻지 않기>> 필요하다면 수사학적 질문(답변이 필요 없는 질문)으로 할 것2. 사용이 어려운 불편한 단어 사용 금지>> 쉬운 단어 많이 사용할 것3. 한 문장에서 같은 단어 반복 금지4. 무언가를 묘사하거나 감정단어를 여러 개 말할 때 "and" 사용 금지>> 차라리 하나씩 다른 문장으로 만들 것5. 한 가지에 대해서만 말하기>> 답변이 딴 길로 새지.. 더보기
[Flutter] GoRouter 사용시 PopScope 적용 안되는 버그 플러터로 안드로이드의 App Link, ios의 Universal Link를 사용해서 링크 접속시 앱을 여는 기능을 구현중인데, 기존에 PopScope를 이용해서 구현해둔 "뒤로가기 두번으로 종료" 기능이 안되는 현상을 발견했다. 분석해본 결과, root 화면에서만 안되는것을 알 수 있었고, 인터넷 검색 결과, 13+ 버전의 GoRouter에서 발생하는 이슈였다. https://github.com/flutter/flutter/issues/140869 [go_router] WillPopScope/PopScope doesn't trigger with back button navigation on root screens · Issue #140869 · flutter/flutteSteps to reproduce.. 더보기
[Flutter] Flutter Module was compiled with an incompatible version of Kotlin. The binary version of its metadata is 1.8.0, expected version is 1.6.0 [주의] 해당 문제는 아직 미해결되었습니다. 해결되는대로 글 수정하겠습니다. 평화롭던 어느날 디버그 모드 빌드중에 이런 경고가 떴다. 코틀린 버전이 안맞아서 생기는 경고,, 딱히 손 안대도 빌드는 됐지만 빨간 글씨가 맘에 걸려 손을 댔다가 재앙이 시작됐다. 1. 인터넷에서 본대로 build.gradle 과 settings.gradle 수정 후 다시 빌드해봐도 계속해서 뜨길래, 지피티 쌤한테 여쭈어보니, 2. gradle-wrapper.properties 에 있는 gradle 버전도 맞춰준 다음 flutter clean./gradlew cleanflutter pub get을 하라신다.. 3. gradle 버전을 코틀린 버전에 맞춰 설정했는데 ./gradlew clean 과정에서 자바가 없다고 설치하라고 하.. 더보기
[Flutter] 소셜 로그인 구현 (카카오톡) 필요한 링크들을 모아두었다.- 카카오 로그인 API 공식 문서https://developers.kakao.com/docs/latest/ko/kakaologin/flutter Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com웹은 빼고 개발 중이었으니 빨간 박스 친 부분만 참고해 구현하였다.  ✓ 패키지 의존성 설치는 쉬우니 스킵. ✓ 커스텀 URL 스킴 설정 방법해당 설정을 해두면 사용자가 Android와 iOS 환경에서 카카오톡으로 로그인 후 서비스 앱으로 돌아오거나, 카카오톡 메시지 버튼 또는 링크로 서비스의 앱을 실행할 수 있다.https://de.. 더보기
[UI/UX] 1. 디자인 공통 요소 (4) 9. 네비게이션사용자가 목적에 이르기까지 페이지 간 자연스러운 이동을 안내하는 시스템.UI 내 사용자의 이동을 돕는 컴포넌트의 종류는 여러가지가 있음.네비게이션 바탭바툴바탭세그먼트 컨트롤드로월 메뉴(햄버거 메뉴)네비게이션 설계가 잘못되면, 엉뚱한 페이지로 연결되거나, 페이지에 들어간 후 돌아갈 수 없어 갇히는 등의 문제가 발생할 수 있음. 예를 들어, 상세 페이지에서 뒤로 가기 버튼은 반드시 있어야 함. 9.1. 네비게이션 바상단에 페이지 이름과 뒤로가기, 액션 버튼 등이 함께 있는 바 형식의 컴포넌트.iOS는 순서대로 구성되어 있음.안드로이드는 순서대로 구성되어 있음. 9.2. 세그먼트 컨트롤상단에 배치되어, 현재 페이지의 하위 리스트들(메뉴들) 간에 빠르게 이동할때 사용되는 컴포넌트.탭끼리는 같은.. 더보기
[UI/UX] 1. 디자인 공통 요소 (3) 6. 터치 타겟(Touch Target)터치가 되는 영역.사람마다 손가락 끝이 화면에 닿는 면적이 다름. 제대로 터치를 하게 하려면 충분히 넓은 유효한 터치 영역을 제공해야 함. 너무 좁은 터치 타겟(=잘 안눌림)은 안좋은 UX를 제공하게 됨.안드로이드의 경우 48x48dp, iOS의 경우 44x44pt를 기준으로 함.7. 썸존(Thumb Zone)말그대로, 엄지손가락이 닿는 부분을 뜻함.많은 사용자들이 한 손으로 핸드폰을 사용하기 때문에, 주요한 기능들이 이 썸존안에 있는 것이 더 좋은 UX를 제공함.엄지로부터 거리에 따라Natural - 닿기 편한 영역Stretch - 닿기 불편한 영역Hard - 닿기 어려운 영역로 나뉨.썸존을 잘 반영한 UI로 삼성 One UI를 들 수 있음. (상단은 Viewin.. 더보기
[UI/UX] 1. 디자인 공통 요소 (2) 3. 아이콘함축적인 의미를 갖고 있는 그래픽 요소. 텍스트를 대체 가능함.아이콘 제작시 고려해야 할 핵심직관적인 아이콘통일된 스타일 아이콘단순한 아이콘아이콘 규격 및 시각 보정3.1. 직관적인 아이콘의미를 누구나 직관적으로 알 수 있어야 함.지나치게 단순화 하거나 디자이너 본인만 아는 아이콘은 사용하면 안됨. 3.2. 통일된 스타일 아이콘본인만의 스타일이나 규격이 있어야 함. 두께, 라운딩, 크기, 스타일 등을 통일할 것. - 아이콘 스타일 종류Outline: 단색 테두리만 그려진 아이콘Solid: 단색으로 채워진 아이콘Filled Line: 검정 테두리가 있고, 다양한 색으로 채워진 아이콘Flat: 단순한 그림 같이 테두리 없이 채색된 아이콘Glassmorphism: 유리의 질감과 투명도를 가진 듯한 .. 더보기
[UI/UX] 1. 디자인 공통 요소 (1) 이번 장에서는 UI 디자이너라면 알아야하는 UI 공통 요소에 대해 배운다.레이아웃컬러아이콘타이포그래피그래픽외에도, 썸존, 터치타깃, 제스처, 네비게이션, 상태 등이 있다.1. 레이아웃 & 그리드 시스템레이아웃(Layout) : 화면 크기, 텍스트, 이미지, 여백 등 다양한 구성 요소를 고려해 앱 내에 정보를 시각적으로 배치하는 것.그리드 시스템(Grid System) : 여러 종류의 요소를 질서 있게 배치하기 위한 그리드 규칙을 의미함. 그리드를 활용하면 시각적 통일성을 줄 수 있음. + 그리드(Grid) : 격자무늬, 격자판모바일 앱의 경우, 반응형 웹과는 달리 스마트폰의 작은 화면에 맞춰 단조로운 레이아웃을 사용하게 됨. >> 대체로 4, 6단 그리드 1단 레이아웃 예시) 유튜브, 인스타 그램 = 나.. 더보기

티스토리툴바