하루 5분 UX UX는 직독하면 User eXperience 즉, 사용자 경험이다. 목표는 사용자가 쓰기 편한 데에 있다. 흔히들 UI/UX를 묶어서 말하는데, 이 둘의 공통점은 User이다. 사용자에 포커스가 맞춰져 있다. 사용자가 보기에 심미적으로 우수하고, 사용성이 좋은 앱은 매출 증가에도 영향을 끼칠 수 있다. 나는 디자이너는 아니지만, 프론트엔드 개발자로서 서로 협업을 하기 위해 이에 대한 기본적인 지식이 필요함을 알고있다. 그저 눈에 보여지는 디자인을 화면에 옮기는 것이 아니라 디자인 안에 숨겨진 UX를 이해해야 온전히 디자인을 적용했다라고 얘기할 수 있다. 모두에게 100% 맞는 UX는 없다. 나에게는 이 앱이 편하나 다른 사람에게는 편하지 않을 수 있다. 그럼에도 불구하고 공통적으로 드러나..
flutter_blue 패키지를 다운받고, 앱을 구동시키는데, 오류가 발생했다. FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':flutter_blue:generateDebugProto'. > Could not resolve all files for configuration ':flutter_blue:protobufToolsLocator_protoc'. > Could not find protoc-3.11.4-osx-aarch_64.exe (com.google.protobuf:protoc:3.11.4). Searched in the following locations: https://repo.mav..
1. macOS 업데이트 1. OS를 최신상태로 업데이트 2. 안드로이드 스튜디오 설치 https://developer.android.com/studio Download Android Studio & App Tools - Android Developers Android Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Download Android Studio today. developer.android.com 1. 안드로이드 스튜디오 홈페이지에서 Download Android Studio 클릭 2. 약관 동의 - 칩에 따라 설치 3. Flutter, Dart 설치 ..
모바일용과 PC용 디자인 시 사용성은 어떻게 달라질까? 별다른 차이는 없으며 기본 원칙은 여전하다. 다만 모바일 환경에서는 사람들이 더 빨리 움직이고 더 적게 읽으며, 모바일이 주는 환경의 특수성이 존재한다. 1. 트레이드오프를 고려하라 제약이란 해야만 하는 일과 할수 없는 일을 가르키며, 트레이드 오프는 제약 때문에 이상을 버리고 선택하는 현실적인 대안을 가르킨다. 제약이 전혀 없다는 말은 언뜻 듣기에는 자유로은 느낌이 들지만, 막상 무언가 지켜야 할 제약이 있다면 초점을 맞출 곳이 생긴다. 훌륭한 모바일 사용성을 구현하는 문제의 본질은 대체로 트레이드오프를 훌륭하게 해내느냐에 있다. 2. 공간이 좁아서 생기는 문제들 화면 공간 부족 때문에 사용성이 희생되면 안 된다. 모바일 화면이 갖는 가장 눈에 띄..
프로젝트의 폴더구조를 작성할 때 tree 패키지를 사용하면 편하다. https://formulae.brew.sh/formula/tree tree Homebrew’s package index formulae.brew.sh $ brew install tree 사용법 루트폴더로 가서 cmd를 입력한다. 폴더구조 txt만들기 $ tree 폴더명 > tree.txt 폴더 + 파일명 txt만들기 $ tree 폴더명 -f > tree.txt
1. 내비게이션 디자인하기 사람들은 사용법을 스스로 알아낼 수 없는 웹 사이트는 사용하지 않는다. 웹 내비게이션 첫걸음 웹 사이트에는 보통 무언가를 찾기 위해 들어간다. 검색할지 직접 찾아볼지 선택한다. 검색 중심 사용자 : 어떤 사이트에 들어가든지 검색 상자부터 찾는 사람들 링크 중심 사용자 : 훑어보기를 선호하는 사람들. 클릭할 만한 링크는 다 클릭했거나 심하게 답답하다고 느낄 때만 검색한다. 그 외 : 상황에 따라 탐색 방식을 결정한다. 훑어보기로 했다면 안내에 따라서 사이트의 계층구조(섹션)를 찾아보며 옳다고 생각되는 항목을 클릭하고, 또 세부 항목들을 클릭하며 정보의 냄새를 따라간다. 찾던 항목이 없다는 확신이 들거나 더 찾기 답답해졌을 때 그 사이트를 떠난다. 웹이 지닌 특이성 규모에 대한 감..
프론트엔드지만, ux에 대해 모르는 것 같아서 읽기 시작했다. 분량이 많지않고 딱 읽기 좋고, 주변 개발자들에게 추천해주고 싶다. 아래의 글귀는 서문 중 발췌하였다. 환경이 아무리 변했다고 해도 기본 원칙은 변하지 않았다. 사용성은 기술이 아니라 사람에 대한 것이고 사람이 사물을 이해하고 사용하는 방법에 대한 것이다. 기술은 빠르게 변하지만, 사람은 매우 느리게 변화한다. 나는 어쩌면 이 책을 통해, 사람이 사물을 어떻게 받아들이는가에 대해 유심히 들여다보고 고민하게될 것 같다. 사용성의 특성 유용성 : 사람들이 필요로 하는 일을 하는가 학습 용이성 : 제품을 보고 사용법을 알아볼 수있는가 기억 용이성 : 사용법을 다시 익혀야하는가 유효성 : 맡은 임무를 완수하는가 효율성 : 작업을 수행하는데 드는 시간..
싸이프러스는 테스팅 프레임워크이다. E2E 테스트 통합 테스트 단위 테스트 공식홈페이지 : https://www.cypress.io/ JavaScript End to End Testing Framework Fast, easy and reliable testing for anything that runs in a browser. Install Cypress in seconds and take the pain out of front-end testing. www.cypress.io 기능 시간 여행 디버깅가능성 자동대기 Spies, Stubs, Clocks 네트워크 트래픽 제어 일관된 결과 스크린샷 및 비디오 크로스브라우저 테스팅 장점 브라우저를 이용하여 테스트하기 때문에, 따로 서버, 드라이버를 포함한 기타..
기존 네이티브 앱을 만들 수 있는 Android와 Swift는 플랫폼 내의 환경을 100% 활용할 수 있다는 장점은 있지만, 그 플랫폼에서만 사용할 수 있다는 단점이 있다. 그러나 PWA를 이용하면, 브라우저 환경에서 동작하는 애플리케이션이므로, Mobile과 PC에서 모두 동작하게 만들 수 있다. 물론, 브라우저의 힘을 빌리므로 각 플랫폼에 맞는 API를 모두 활용하진 못한다. PWA로 제작하기 위한 준비물 반응형 디자인으로 만든 웹앱 HTTPs Manifest Service Workers Manifest란? 웹앱에 대한 정보가 담겨있는 json 파일이다. Service Workers란? JavaScript로 작성하며, 서버와 데이터를 주고받을 때, 중간에서 요청을 통제하고 관리하는 역할을 한다. 데이..
📝 프론트엔드 로드맵에 대해서는 너무나 유명해서, 다들 아실 것이라 생각합니다. 아티클 중 React 개발자를 위한 로드맵을 발견하여 기쁜마음에 공유합니다. 출처 : https://medium.com/dhiwise/advanced-roadmap-for-react-js-developers-3a40ce4174b9 리소스 ReactStrap Ant Design Blueprint JS Evergreen Storybook 좀 더 자세한 것은 ReactJS UI Frameworks 를 찾아보세요! 테스팅 React 개발자에게 필수적인 스킬입니다! 단위 테스트 Jest React texting library Enzyme Sinon Mocha Chai AVA Tape E2E 테스팅 (End To End) Seleniu..
📝 이 글은 https://javascript.plainenglish.io/17-killer-websites-for-web-developers-13e1e30345b8 의 글을 번역 및 정리한 글입니다. 1. Random Image via API Unsplash Source Unsplash Source A simple API for embedding free high-resolution photos from Unsplash. source.unsplash.com 랜덤이미지 관련 JSON API 입니다. 2. Embeddable Widget Apps for Notion Apption - Notion friendly Embeddable Widget Apps Apption - Notion friendly Embe..
📝 기존 Git 관련 명령어 정리자료들이 여기저기 흩어져있어서, 이 곳으로 정보들을 합치는 중입니다. Git은 모든 파일을 추적(tracking)하는 버전관리시스템입니다. 따라서, 내가 언제 파일이 변경되고, 만들고, 삭제되었는지를 알게 해줍니다. Github은 파일공유소라고 보면 되겠습니다. 는 무시하고(typing하지말고) 적어주세요! Git 기본설정 Git 하위 디렉토리 생성 (깃 저장소 생성) git init 해당 폴더에 git이 없을 때 사용한다. Git 정보 확인 git --version 깃(git) 버전 확인 git log 커밋(commit)내역 확인 git remote -v 원격저장소(github repository) 확인 Github에 있는 repository 가져오기 (깃헙과 로컬 연결..
