2023년 7월 2일 일요일

웹페이지 덜 힘들여서 만들기 - Figma, Framer

항상 통빡으로 들이밀면 몸과 마음이 고생한다.

그래서 회사에서 진행하는 방식처럼

기획 -> 마크업 -> FE & BE 순으로 나름의 제작 절차를 구성하면 덜 힘들지 않을까 싶었다.

그런데 기획이라는건 사실 나 혼자 개발하는거라 머릿속에 있어 따로 문서화 할 필요는 없고, 웹페이지 그림 그리는 것부터 바로 시작하면 되기 때문에 Figma 를 사용해보기로 했다.

Figma


Figma For Beginners 1~4 를 먼저 공부했다.

웹페이지를 만들어봤다.

디자인에 대한 감도 별로 없고, 피그마 기본 기능만 알고 있었기 때문에 엄청난 공수가 들어갔다.

Figma 프로젝트


사내 해커톤을 진행하며 팀원들과 원활한 대화를 위해 Figma 로 목업을 만들어보았다.

이미 있는 사내 서비스를 참고하였기 때문에 디자인 창의력은 많이 필요하지 않았다.

해커톤을 진행하며 필요한 기능과 용어를 그때그때 마구 검색해서 알게 되었다.

가끔 이런 긴장감 있는 상황에서 빡통으로 찾아내는 것도 필요하다.


내가 피그마를 잘 못써서 그런 것 같은데, 노가다를 두 번 해보니 이게 맞나 싶은 생각이 점점 들었다.

Framer


우연히 Framer 를 알게 되었다. 


Framer 를 사용하면 보여지는 모습 뿐만 아니라 컴포넌트 간의 상호작용까지 프로토타이핑 할 수 있어 FE 개발자와 추가 커뮤니케이션 없이도 협업이 가능할 정도라고 한다.

그래서 이걸 공부하는 중이다. 

weworkremotely.com 홈의 마크업을 따라해보았다.



모바일 뷰가 필요하므로 햄버거 메뉴를 어떻게 만드는지 찾아보았다.




Framer 는 확실히 동적인 기능 위주의 강의가 많은 것 같다.


통빡을 덜 쓰려면 뭐든 공부를 해야 한다.

2023년 6월 15일 목요일

sveltekit 에서 clipboard 의 이미지 붙여넣는 예제

TL;DR 

paste image from clipboard using tiptap • REPL • Svelte


과정:

https://www.codemzy.com/blog/tiptap-pasting-images

이거 대로 하면 될 줄 알았는데, 몇가지 빵꾸가 있었다.


먼저, item 을 한번 더 까야 image file 을 얻을 수 있다.

https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem/getAsFile


그리고 image 를 node 에 붙이는 방법 말인데, 이건 저 블로그 글에서 하라는대로 하면 안된다.

https://tiptap.dev/api/nodes/image#usage

editor.commands.setImage({src: response}) 를 써야 한다.


2023년 1월 11일 수요일

해외주식 세븐스플릿 자동매매 프로그램

'세븐스플릿'이라고 이름지어진 분할매매법이 있다.

'세븐스플릿'의 명명자인 박성현님이 '매직스플릿'이라는 자동매매 프로그램을 내놓으셔서 사용중에 있다.

아쉽게도 국내 주식용이라, 해외 주식용 프로그램을 직접 만들어서 사용해보기로 했다.

키움 API 등은 인터페이스가 불편하여 한투에서 제공하는 rest API를 사용하였다.


첫번째 버전이 만들어졌고, 잠자기 전에 켜놓는다.

https://github.com/gogyzzz/autotrade

만들면서는 나중에 코드 정리를 해야 겠다고 생각했는데, 

막상 만들고 나니 잘 돌아가고 있어서 건드리기가 귀찮아졌다.