블록체인 UI를 위한 Figma plugin 만들기
해시값을 자동으로 랜덤값으로 변경되게 하자
오랜만에 긴 휴가를 쓰며, 취미 생활을 했다.
코딩은 나에겐 프라모델 조립과 비슷한 즐거움이 있는데, 얕은 나의 지식과 정보를 찾을 수 있는 만큼 찾아서 쓸모 있는 것을 직접 만들어 보는 것이다. 물론 잘 풀리지 않으면 머리 싸매고 몇 시간을 보내기도 하고, 보통은 마지막쯤에 대충 타협하고 90%의 완성도로 끝낸다. 원하는 동작이 되기는 하니까. 디자이너가 할 말은 아니지만, 이건 디자인을 하는게 아니라 취미로 만드는 것이니까.
그래서, 얼마 전부터 생각했던 피그마 플러그인을 만들었다. '0x7e8502a46f6812...'처럼 생긴 블록체인에서 많이 쓰이는 해시값을 랜덤하게 변경해주는 플러그인이다.
실제 해시값은 이정도의 길이이다. 사람이 랜덤으로 타이핑 할 분량은 아니다.
0x0d00c2f5bdeaff271248abf9cc86b64595855bdb95ecbb9a65eb0ba7aeabe41d
요즘은 블록체인 관련된 일만 하니, UI설계와 디자인을 할 때 hash가 많이 들어가기도 하고, 특히 테이블 형태로된 UI들에도 해시값이 많이 들어간다. 그럴 때 항상 눈에 밟히는 것은 똑같은 해시값들이다. 실제라면 저렇게 똑같은 해시값들이 나열되어 있지 않을 테니, UI가 실제 동작할 때 어떨지 감이 잘 안온다. 그래서 아쉬운 마음에 테이블 위쪽의 3~4개 정도의 해시값들은 직접 타이핑해서 랜덤하게 바꿔본다. 그리고 다른 사람들이 그렇게 랜덤하게 적은 것 중, 'j', 'z' 같은 알파벳이 보이면 또 눈에 밟힌다(블록체인에서 해시값들은 보통 16진수로 구성되어, 0-9그리고 a-f 까지의 알파벳만 사용된다).
그래서 아래와 같은 피그마 플러그인을 만들었다.
아래는 동작을 보여주는 gif 애니메이션이다. 클릭해야 전체 애니메이션이 보인다.
클릭해야 전체 영상이 보임두 가지의 옵션이 있는데, 다음과 같다.
1. Select Type
compact : 해시값은 길어서, 좁은 너비의 UI에 표시될 때, 0x000000... 혹은 0x0000...0000과 같이 표시할 때가 많다. 그 중, 후자에 대한 처리를 할 수 있는 옵션이다.
Full(42,Addr) : 해시값이 쓰이는 대상도 다양한데, 그 중 많이 쓰이는 주소(address) 해시값 길이에 맞춰 랜덤하게 값을 만드는 옵션이다.
Full(64,Tx) : 주소만큼 UI에 많이 표시하게 되는 것이 트랜잭션(transaction, tx, txn) 해시값이다. 그 길이에 맞춰 랜덤하게 값을 만드는 옵션이다.
2. Select Target
현재 열려있는 페이지 전체에서 '0x'로 시작하는 모든 텍스트를 대상으로 적용하는 옵션이다.
선택된 항목과 그 하위 요소들에서 '0x'로 시작하는 모든 텍스트를 대상으로 적용하는 옵션이다.
코딩을 하며,
랜덤한 값을 만드는 코드는 아주 간단해서 테스트는 쉬웠는데, 피그마 플러그인을 처음 만들다보니 개발을 위한 피그마 페이지의 구조(위계와 요소의 관계, 타입 등등..)를 찾아보며 하는게 생각보다 고된 일이었다. 특히 실제로 티는 안나지만, 라이브러리에 등록된 컬러를 유지시키는 것과 같은, 상세한 구조와 값들에 대해서 문서를 찾아보고 해결하고 하는 것이 복병이었다고 할 수 있겠다.
디자인을 할 때, 이제는
귀찮은 일 하나는 줄일 수 있겠다.
사실 대단한 것은 못되지만, 누군가는 필요하지 않을까 하는 생각과 함께.
