회사에서 RN으로 프로젝트를 진행하게 되었는데 핀 코드 라이브러리가 필요했다.

간단한 기능이지만 라이브러리를 찾게 된 데에는 단 한 가지의 이유가 있었다.

아무래도 처음 진행하는 RN 프로젝트라 같은 React를 사용하니 로직 면에서는 숙련도 이슈가 없었지만, 컴포넌트(View, Text 같은)에 AOS, IOS에만 각각 있는 스타일이 존재했었기 때문에 어려움이 있었고, 애니메이션도 브라우저와 너무 달랐기 때문에 정밀하게 조작하는 것이 단시간에 컴포넌트를 만들기 불가능하다고 판단하고 있었다.

하지만 넘버패드에 문자들이 셔플 되는 기능이 있는 라이브러리를 찾지 못해 결국 구현하게 되었고 2차원 배열을 섞는 기능을 생각하는 데 오래 걸렸지만, 예상보다 오래 걸리지 않았다.

그런데 아무래도 블록체인과 관련된 회사이기 때문에 핀 코드나 2차 비번 관련해 해당 컴포넌트를 다른 곳에서도 많이 사용할 것 같아 모듈화가 필요하다고 판단했고

하는 김에 많은 라이브러리를 다운 받아 웹이나 앱을 만들었기 때문에 나도 다른 개발자들에게 조금이나마 도움을 주고 싶어 라이브러리로 만들게 되었다.

다시 초심으로 돌아가게 된 기분이고 처음 만든 만큼 생각보다 애착을 가지고 있다.

완성된 라이브러리를 사용한 AOS

완성된 라이브러리를 사용한 IOS

나는 웹 진영에 있지만 라이브러리를 만들어 본적도 없고 앱이라면 또 어떻게 해야하나 고민이 많았다.

하지만 RN 라이브러리를 만드는 것을 도와주는 라이브러리를 찾게 되어 쉽게 구현할 수 있었다.

내 안의 라이브러리라는 개념은 사람들이 쉽고 빠르게 원하는 기능을 사용할 수 있어야 한다고 생각한다.

다른 무엇보다 사용자가 조작할 수 있는 범위를 정하는 것이 제일 어려웠다.

너무 많은 자유가 있다면 설명하는데 한세월이 가고 또 너무 없다면 UI 컴포넌트인 만큼 사용하는데 아쉬움이 있을 거로 생각했다.

따라서 적절한 자유를 줄 수 있는 Compund pattern를 사용하기로 했다.

전체를 감싸는 데이터를 가지고 있는 컴포넌트

정답인 핀 코드의 갯수만큼 원을 가지고 있는 컴포넌트 유저 입력과 다르다면 애니메이션이 작동한다.

유저가 문자를 누르는 컴포넌트

오랜만에 context api를 사용했지만 일단 리액트에선 문제가 발생하지 않았다.

문제는 CSS

AOS, IOS 각각 따로 고유한 스타일을 가지고 있는 문제점? 이 존재한다.

내 경우에는 textVerticalAlign이 문제였다.

AOS에만 존재하는 css이기 때문에 안드로이드 에뮬레이터만 보면서 개발하던 나는 아무것도 모르고 있었다.

영상을 올리기 위해 IOS에서도 실행을 하면서 알게 되었는데 넘버패드에서 문자가 위로 올라가 가운데 정렬이 되고 있지 않는 심각한 문제였다. 결국 컴포넌트를 재구성하면서 css를 수정했다.

왜 플러터가 지금 각광받고 있는지 알게 되었다. AOS, IOS에서 똑같은 화면을 보장해 줄 수 있다는 것은 내가 생각해 왔던 것보다 훨씬 엄청난 장점이었던 것이다.

많은 사람들이 사용할 수 있도록 영어로 작성했다.

요즘 나오는 라이브러리와 같이 계속 이쁘고 간단하게 보여 주기 위해 노력했지만 그렇게 되고 있는지는 모르겠다.

계속 오타가 나고 영어 실력이 부족하다 보니 계속 추가하고 수정하면서 업데이트 하고 있다.

일상적으로 만든 컴포넌트를 라이브러리로 만드는 것이 생각보다 재밌는 작업이었고 봇인지 진짜 사람들이 다운받는 것인지 모르겠지만 2일 만에 166의 다운로드가 생겼다.

더 많은 사람들이 이용해주고 피드백을 받으면 좋겠다.