본문 바로가기

분류 전체보기135

피그마(Figma) 시작하기 – 피그마 인터페이스 지난 포스팅에서 앱 기획 도구에는 어떠한 것들이 있는지 알아보았고 이제 앱을 본격적으로 기획해 보기 위해 한 가지 툴을 선택해 공부해보려고 합니다. 어도비XD, sketch, figma 등 여러가지 좋은 툴들이 있었지만, 저는 일정 부분 무료로 사용할 수 있고 초기 학습이 그래도 쉽다고 느껴지는 피그마를 공부해보려고 합니다. 그 첫번째 시간으로 피그마 인터페이스에 대해 공부해 보겠습니다.  피그마 인터페이스 전체 구성 알아보기 피그마는 인터페이스는 상단 툴 바와 좌측패널 그리고 우측패널로 구성되어 있으며, 가운데에는 작업 공간이 있습니다. 좌측패널을 보면 페이지와 리스트들이 있고 페이지는 프로젝트 안에서 각각의 작업장이라고 생각하면 되고 리스트형태로 나열되어 있는 것들은 작업장안에 있는 레이어들을 의미합.. 2024. 6. 17.
React Native Android 에뮬레이터 연결 및 Button과 TouchableOpacity 이용해 버튼 만들기 지난 포스팅에서는 React Natvie의 컴포넌트에 대해 알아보고 Image 컴포넌트를 사용해 보았습니다.오늘은 앱의 기본이 되는 버튼 컴포넌트에 대해 알아보고 실제 버튼을 구현하는 과정에 대해 포스팅해보려고 합니다. 그리고 버튼 컴포넌트 외에도 버튼의 기능을 제공할 수 있는 다른 컴포넌트에 대해서도 알아보려고 합니다. 사실 버튼 컴포넌트를 공부하지만 기본적인 앱을 구현할 때 오히려 다른 컴포넌트를 이용해 버튼을 많이 구현합니다. 그럼 시작하겠습니다. 1. React Native Android 에뮬레이터에서 실행하기우선 하단 네비게이션 바를 구현하기에 앞서 기존에는 실제 디바이스에서 Expo 앱을 통해 만들어진 앱을 확인했지만 사용하고 있는 PC와 스마트폰의 와이파이를 동일하게 연결해야만 하는 번거로움.. 2024. 5. 25.
앱 기획 및 유용한 도구 정리 앱 기획이란? 앱을 개발하기에 앞서 선행돼야 하는 것은 역시나 기획입니다. 회사나 개인 사업을 위해 앱을 만든다면 기획 단계에서 많은 일들을 해야 합니다. 앱의 주요 목적과 해결할 문제를 명확히 하고 사용자의 요구사항을 충분히 분석하여 아이디어를 구체화한 후 시장조사를 통해 경쟁 애플리케이션과 비교하여 차별화된 기능도 갖춰야 합니다. 그 후 기능 명세서를 작성해 App의 주요 기능들을 목록화하고 이를 바탕으로 와이어프레임 제작 후 프로토타입을 제작해야 합니다. 이러한 일련의 과정을 거친 후 본격적인 UI/UX 디자인과 개발이 착수됩니다.따라서 App의 기획은 굉장히 중요합니다. 그러나 저는 취미와 공부용으로 App을 개발해볼 계획이기 때문에 여러 단계로 나눠지는 App 기획 단계 중, 앱 기능 구체화와 .. 2024. 5. 24.
JavaScript 공부하기 첫번째 npm 프로젝트 생성 및 실행, 배열(Array)데이터 공부하기 오늘은 너무 예전에 자바스크립트를 공부하고 해 본 적이 없어 Expo를 통해 앱을 만들기 전 자바스크립트에 대해 공부해보려고 합니다. 자바스크립트에 대해 공부하기 위해 먼저 npm 프로젝트를 생성하고 실행해 실제로 코딩한 자바스크립트가 어떻게 돌아가는지 확인해 보고 첫 번째로 배열 데이터에 대해 공부해보려고 합니다. npm 프로젝트 초기 세팅하고 실행하기npm init 명령어를 통해 프로젝트를 생성해당 명령어를 넣으면 프로젝트의 기본 구성을 설정할 수 있는 대화형 프롬프트가 시작됩니다. 첫번째로 package name(프로젝트 이름)을 물어봅니다. 여기서 별도의 프로젝트 이름을 적어도 되고 엔터키를 통해 다음으로 넘어가면 기존 폴더 이름 그대로 프로젝트가 생성됩니다. 두번째로는 프로젝트의 버전을 물어보며.. 2024. 5. 19.

티스토리툴바