본문 바로가기

전체 글

(138)
RN Perspective Crop - 크롭 사이즈편 Perspective Cropper로 크롭할 영역을 선택하면, 크롭 영역은 대부분 직사각형이 아니라 각도가 제각각인 사각형입니다. (직사각형을 위한 크롭 툴은 따로 선택할 수 있게 해 뒀습니다.) Perspective 크롭을 하면 직사각형으로 변환될 텐데, 이 직사각형의 크기는 어떻게 결정해야 할까요? 의외로 Cropper 컴포넌트 다음으로 많이 고민했던 부분이었습니다. 세로=Max(좌,우), 가로=Max(위,아래)? 예전에 안드로이드 앱 만들 때 공부했던 자바책입니다. 처음엔 기울여서 찍으면 좌우 대각선의 길이가 증가할 것이기 때문에, 단순히 세로=Max(좌,우), 가로=Max(위,아래) 정도로 하면 될 것 같았습니다. 그리고 좌표평면에 있기 때문에, 직각삼각형 공식을 사용하여 각 변의 길이를 구할 수..
RN Perspective Crop - 네이티브편 RN Perspective Crop - OpenCV편에서 만든 WebView는 이미지 처리 연산만 담당할 뿐 사용자에게 보이지 않습니다. 하지만 내부의 캔버스는 크기를 가지고 있습니다. 윈도우에서 브라우저 크기를 조절해도 스크롤바만 생기고 내부 컨텐츠 크기는 그대로인 것과 동일한 개념입니다. 이제 아래와 같이 사용자가 크롭할 영역을 선택할 수 있는 컴포넌트인 Perspective Cropper를 만들어보겠습니다. 주요 재료 react-native-gesture-handler 크기가 없고, 자식 컴포넌트를 터치하고 드래그했을 때, 움직인 거리 정보를 포함한 이벤트를 발생시키는 PanGestureHandler 컴포넌트를 제공해 줍니다. react-native-reanimated 리액트 네이티브에서 기본적으로..
RN Perspective Crop - OpenCV편 Perspective Crop은 원본 이미지에서 선택한 영역(직사각형 아님)을 직사각형으로 잘라주는 자르기 방식입니다. OpenCV라는 이미지 처리 라이브러리를 사용해서 이 기능을 구현할 수 있습니다. OpenCV 공식 홈페이지에서 Perspective Crop뿐만 아니라 해당 라이브러리를 사용한 다양한 이미지 처리 방식과 예제를 확인할 수 있습니다. OpenCV는 다양한 언어로 바인딩되어 배포되어 있습니다. 자바스크립트는 NodeJS용 라이브러리와 브라우저에서 사용할 수 있는 라이브러리(opencv.js)가 배포되어 있습니다. 그리고 리액트 네이티브에는 react-native-opencv3 라이브러리가 있습니다. react-native-opencv3 처음에는 react-native-opencv3를 선택..
[1등 오답노트] 입체 자르기 추가 1등 오답노트 사용 시간은 대부분 저녁 시간대인데, 이 시간에 문제를 수직 각도에서 촬영하면 그림자가 생길 가능성이 높습니다. CamScanner같은 스캔 앱에서는 기울여서 그리림자 없이 촬영한 후에 Perspective Crop 기능으로 수직 각도에서 촬영한 것처럼 변환시킬 수 있습니다. 1등 오답노트에 Perspective Crop 기능이 없는 것이 아쉬웠습니다. Scanbot 리액트 네이티브 라이브러리가 있지만 무료가 아니었습니다. 최소 2만 유로부터 시작하는데 부담스러운 가격입니다. 무료인 react-native-perspective-image-cropper 라이브러리도 있지만, 인터페이스도 별로고, 안드로이드에서 테스트해보니 이상한 영역이 크롭되어 사용하지 못했습니다. 그래서 직접 만들었고, 코..
리액트 네이티브 튜토리얼 기능 구현3 - Example 1편과 2편에서 만든 Context와 Component를 사용해서 튜토리얼을 표시해 보겠습니다. 실제 동작은 1등 오답노트 앱에서 더 자세히 확인하실 수 있습니다. 먼저 1편에서 만든 TutorialProvider로 앱의 최상단을 감싸줍니다. 그리고 다음과 같이 구멍과 텍스트 정보를 만들어 줍니다. 터치할 때마다 hole_1 ▷ hole_2 ▷ hole_3로 이동하기 위한 정보들입니다. 마지막으로 Settings 스크린에 다음 코드만 추가해 주면 됩니다. 하지만 저는 Settings 스크린에서 튜토리얼이 끝난 후 이용약관 스크린으로 이동시키기 때문에 아래와 같이 구현했습니다. 처음에 firstLaunch에 의해 useEffect가 트리거되지만, Settings 컴포넌트가 실행되기 전에는 firstLaun..
리액트 네이티브 튜토리얼 기능 구현2 - Components 1편에서 만든 TutorialProvider에 사용된 Tutorial 컴포넌트를 만들어 보겠습니다. Tutorial 컴포넌트의 형태입니다. HoleInfo 타입은 1편 마지막 부분을 참조해 주세요. 우선 4개의 훅이 사용됩니다. DescriptionPosition 타입은 1편 마지막 부분을 참조해 주세요. HoleView는 한 번에 여러개의 구멍을 표시할 수 있습니다. 하지만 저는 한 번에 한 개의 구멍이 터치할 때마다 이동하는 UI를 구현하였습니다. 그래서 holes는 항상 요소가 1개인 배열입니다. firstHole는 매개값으로 입력되는 holes에서 첫번째 요소의 x, y 좌표에서 사이즈만 0으로 변경한 더미 값입니다. 처음에 구멍을 표시할 때 점점 커지는 효과를 넣기 위해서 만들었습니다. 마지막에..
리액트 네이티브 튜토리얼 기능 구현1 - Context, Libraries 1등 오답노트 앱을 출시했는데 사용자들이 앱을 다운로드받아도 참여율이 적어서 고민이었습니다. 일단 인터페이스가 생소해서 사용자들이 공감하지 못하는 것인지 의심했습니다. 그래서 아래과 같은 튜토리얼 기능을 구현해 보았습니다. 어떻게 구현할 것인가? 일단 처음에 두 가지 방법을 생각했었습니다. 화면마다 튜토리얼 데이터와 컴포넌트를 관리하는 방법 Context에서 모든 페이지의 튜토리얼 데이터와 컴포넌트를 관리하는 방법 이 중에서 두 번째 방법을 선택했습니다. 1등 오답노트 앱은 단순해 보여도 내부적으로 은근히 많은 화면이 있고, 설명해야 할 중요 기능만 23개였습니다. 화면마다 튜토리얼 데이터와 컴포넌트를 관리한다면 중복되는 코드가 많아질 것 같았습니다. 그리고 탭 네비게이션에 포함되지 않은 화면은 새로 로..
[App] 1등 오답노트 출시 학생이나 고시생을 위한 오답노트 앱입니다. 최대한 단순하면서도 많은 정보와 기능을 담으려고 노력했습니다. 아래 랜딩페이지에서 기본 정보와 스토어로 이동할 수 있는 버튼이 포함되어 있습니다. 일등오답노트 편리함 1등 기능도 1등 오답노트 앱 xn--o80b61as7bhx6adrbf25a.kr 모든 기능을 어떻게 구현했는지 자세히 설명하지는 않고, 주요 기능에 어떤 라이브러리를 사용하고 고려했으며, 구현할 때 겪었던 문제나 고민을 위주로 말씀드리겠습니다. 사용자 인터페이스 사용자가 정리한 오답들을 구글 Keep처럼 2열로 벽돌 쌓듯이 보여줍니다. 하지만 ScrollView 안에서 그냥 쌓기만 하면 안됩니다. 50~100개가 넘어가면 특히 안드로이드에서 버벅거리기 때문입니다. (탈락) FlatList는 다중 ..