본문 바로가기

전체 글51

React + Typescript 프로젝트에 eslint, prettier 적용 기본적으로 vscode를 사용한다면 extensions에서 eslint와 prettier를 설치해주는 것이 좋다. eslint 설치 yarn add -D eslint eslint-plugin-react @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react react 문법 규칙 적용 @typescript-eslint/parser typeScript parser @typescript-eslint/eslint-plugin typescript-eslint의 규칙 적용 .eslintrc 생성 // .eslintrc 파일을 루트에 생성하고 아래 기본적인 내용을 작성한다. { "parser": "@typescript-eslint/.. 2023. 2. 5.
React + Typescript 프로젝트 시작하기 프로젝트 생성하기 npx create-react-app [프로젝트명] --template typescript 터미널에 위 명령어를 입력하면 자동으로 [*.tsx] 확장자로 프로젝트가 생성된다. 설치를 완료했다면 yarn start 명령어를 통해 브라우저에서 확인할 수 있다. styled-components 설치 반드시 필요한 라이브러리는 아니며 전략에 따라 필요하다면 설치, styled-components를 typescript에서 문제없이 사용하기 위해 타입까지 함께 설치를 진행한다. yarn add styled-components yarn add -D @types/styled-components 기본 형태 기본적으로 사용할 데이터에 대한 타입을 지정한다. 아래는 name, age라는 데이터를 props.. 2023. 1. 10.
macOS nvm 설치 nvm이란? Node Version Manage의 약자로 간단하게 말해서, Node.js의 버전을 관리하는 패키지이다. 여러 프로젝트를 작업할 때 각 프로젝트별 Node 버전이 다를 때 매우 유용하다. 여러개의 Node 버전을 설치 및 스위칭 할 수 있게 해준다. https://github.com/nvm-sh/nvm GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions - GitHub - .. 2023. 1. 4.
모든 UX 디자이너의 관심목록에 있어야 할 영화 4편 때때로 나는 내가 소비하는 미디어의 종류와 젊은 디자이너들에게 무엇을 추천할 수 있는지에 대한 질문을 받는다. 읽을만한 디자인 기사와 책들 사이에서 길을 잃는 것은 아주 쉽다. 영화는 학습과 영감을 동시에 얻으면서, 단조로움을 깨는 좋은 방법이다. 첫 번째 시리즈에서는 모든 UX 디자이너의 시청 목록에 있어야 할 훌륭한 영화 목록을 공유할 것이다. 1. 디자인과 생각 Design & Thinking (2012) 이 목록에서 많은 사람들이 기대하는 다큐멘터리이다. _Design & Thinking_은 UX의 핵심 아이디어 중 하나인 _Design Thinking_과 그것이 사회에서 더 큰 문제들에 어떻게 영향을 미치고 해결하는지 살펴본다. 일반적인 화면과 인터랙션을 넘어, 다양한 디자이너의 프로세스와 이들.. 2020. 12. 20.
2021년 9가지 디자인 트렌드 앱이 현대적으로 보이지 않는다면 그것은 현대적이지 않는 것이다. 그렇기 때문에, 2021년 출시될 내용을 포함해 가장 인기있는 앱 디자인 트렌드를 주시하는 것은 중요하다. 문제는 그 인기있는 트렌드를 어떻게 예측 하는가이다. 디자이너 그 자신보다 누가 더 잘 알겠는가? 프리랜서 디자이너 커뮤니티인 99designs에서 최근 그들이 어떤 트렌드를 주목하고 있는지를 물었다. 다음은 내년과 그 이후에 더 많이 볼 수 있는 최고의 앱 디자인 트렌드이다. 1. 뉴모피즘 Neumorphism 아이콘과 버튼은 지난 몇 년 동안 극도로 단순해졌다. 2021년에 디자이너들은 이들을 더 매력있게 만드는 것을 목표로 하고 있다. 어떤 방법으로 성취할 것인가? 그에 대한 답은 "뉴스큐어모피즘New Skeumorphism"의 .. 2020. 12. 13.
UX or UI, 어디에 집중해야 할까? 자신을 UI/UX 디자이너라고 소개하고, UX 또는 UI 중 어떤 부분을 주요 지분으로 가지고 있는지 확신하지 못하는 사람들이 전 세계적으로 있다. 업계에서는 UX 디자이너, UI 디자이너가 있으며 두 사람 모두에게 각자의 책임이 있다. 서로를 비교하는 대신에, 누가 무엇을 할 수 있는지 살펴보자. User Experience Design(UX) 우리가 인체를 상품으로 가정한다면, 골격은 안정과 형태를 제공한다. 이것이 제품의 UX 디자이너가 하는 일이다. 사용자 페르소나, 시나리오, 경쟁 분석, 정보 아키텍처, 유저 플로우, 와이어 프레임, 사용자 인터페이스, 프로토타입 등과 관련될 수 있는 부분은 인체에서 심장, 신장, 간, 폐 등과 같다. 신체 부위가 오작동하면 다른 부위의 기능에도 영향을 미친다... 2020. 11. 20.
UX 체크리스트 : 성공적인 포트폴리오의 5가지 요소 제출하는 이력서를 지원하려는 분야에 맞게 작성하는 것은 좋은 것이며, 디자이너의 포트폴리오도 다르지 않다. 채용 담당자를 사용자로 생각하고 포트폴리오 제작을 진행해보자. 1. 경력 기술서 "훌륭한 제품과 마찬가지로 당신의 경력에도 목적과 논문이 필요하다. 이유가 필요하다." - Sarah Doody, The UX Portfolio Formula 설립자 우리 모두는 영어 수업에서 독후감을 위한 논문 문장을 쓴 것을 기억할 것이다. 나침반, 개인 진술이 포트폴리오의 목적을 설정하는 것처럼 논문에서도 논문의 중심 논거를 설정한다. 당신은 분야의 전문가인가? 아니면 다방면에 전문 지식이 있는 일반가인가? 팀에서 일한적이 있는가? UX를 위한 팀이었는가? 당신의 비전은 무엇인가? 당신의 포트폴리오를 검토하고 있는.. 2020. 11. 15.
디자인 포트폴리오에 대한 조언 나는 방금 스피드 데이트 스타일의 디자인 멘토링 행사를 마치고 집에 돌아 왔고 , 지치지만 에너지가 넘친다. 나는 내성적인 성격이고, 낯선 사람과 2시간을 연속으로 대화하는 것은 육체적으로나 정서적으로 지치는 일이다. 하지만 이제 막 졸업한 졸업생들과 신입 디자이너들과 이야기를 나누면 내가 왜 이 분야에 입문했는지, 왜 이 일을 하기 위헤 매일 일어나는지 상기되기 때문에 힘이 난다. 이 행사에서 한 가지 눈에 띄는 점은 Intuit나 Facebook과 같은 회사에 입사 희망하는 지원자들을 수년간 인터뷰한 결과, 포트폴리오가 종종 잘못된 부분에 초점을 맞추고 너무 길다는 것이다. 오늘 밤 내가 젊은 디자이너들에게 했었고, 포트폴리오에 대한 피드백을 찾는 모든 디자이너들에게 해주고 싶은 조언이 있다. 시작하.. 2020. 11. 4.
UX 포트폴리오 사례 연구 템플릿(채용 성공한 사례 포함) 포트폴리오는 디자인 기술을 채용 담당자와 고객에게 판매할 때에 있어 가장 중요한 퍼즐 조각이다. 그리고 당신이 할 모든 디자인 경력의 가장 중요한 요소이다. UX 사례 연구는 디자인 프로젝트, 목표, 사용된 방법론, 해결책을 찾는 프로세스 및 그 결과에 대한 상세하지만 요약된 발표 집이다. 취업 면접과 잠재적으로 인상된 급여를 받을 수 있는 직업을 얻기 위해, 포트폴리오를 더 간단하고 덜 압도적으로 만드는 UX 포트폴리오 사례 연구 템플릿을 공유하고자 한다. 우연히 시행착오를 거쳐 발견했지만 이로 인해 2개의 대행사와 제품 회사에서의 시니어 UX 디자이너로 헤드헌팅을 받는 결과를 낳았다. 하지만 먼저 처음부터 시작하겠다. 포트폴리오를 디자인하려고 할 때, 나는 수많은 시간을 과거 프로젝트에서 관련 업무를.. 2020. 10. 23.
UX 라이팅 향상을 위한 5가지 팁 디자인을 진행할 때 플랫폼의 모든 콘텐츠, 내용, 카피는 누가 작성하는가? 당신인가? 아니면 클라이언트? 개발자? 마케터 혹은 SEO 전문가? 위의 모든 것? 인터페이스를 채우는 단어를 고려할 때, 우리는 보통 그들의 시각적 특성, 즉 타이포그래피, 선 간격, 정렬 그리고 그것들이 화면의 다른 미적 요소들과 어떻게 상호작용하는지에 대해 관심을 갖는다. 하지만 최근 UX 업계는 우리가 디자인에 사용하는 단어의 고유한 의미, 의의 그리고 함축적 의미에 대해 안목을 훈련하면서 오래된 현상을 UX 라이팅이라는 새로운 용어로 연결했다. 우리가 지금 UX 라이팅의 부상을 보고 있는 것은 전혀 놀라운 일이 아니다. 대화형 디자인이 아마존의 Alexa와 같은 개인화 디지털 비서와 챗봇 형태로 발전함에 따라 UX 디자이.. 2020. 9. 30.

티스토리툴바