🐬 긴호흡

1. 배경 올해 상반기부터 CEOS 15기로 활동하고 있다. 신촌 연합 창업 동아리로, 개발자 뿐만 아니라 기획과 디자인 파트까지 함께 활동한다. 기획, 디자인, 프론트, 백엔드 각각 두명씩 꽉 찬 총 다섯 팀이 만들어진다. 기획과 디자인에 고민할 시간을 줄여 오로지 개발에만 쏟을 수 있다는 건 생각보다 더 좋았다. 그동안 전공자로서 프론트앤드를 깊게 공부한다는 것에 대한 고민이 많았다. 개발자를 지망하는 학교 동기들은 거의 다 백엔드를 공부하고 있다. 그 사이에서 혼자라는게 불안하지 않았을리가. 세오스 활동을 하면서 프론트를 계속 공부해야겠다는 확신이 생겼고, 내가 지금까지 공부해오던 것을 이번엔 제대로 활용해보고 싶다는 욕심이 있었다. 감사하게도 그 욕심을 채워줄 수 있는 팀에 들어가게 되었다. Ba..

프로젝트가 벌써 마무리 단계에 있다. 21학번 메인 기수 친구들이 만들고 있는 학회 홍보물에 같이 껴서 뿌려질 계획이다. 그 친구들과 시간을 맞춰서 개발을 진행해왔다. 세세한 문구들을 마지막으로 다듬었고 테스트용으로 넣어놓은 것들, 콘솔.로그들, 등등을 지우고 마무리할 준비를 끝냈다. 두둥. 메인 랜딩 페이지 ​메인 랜딩 페이지 디자인은 좀 급하게 끝났다. 세로로 긴 형태의 카드뉴스(?)는 많이 만들어봤지만 데스크톱 원페이지 웹사이트는 처음이라.. 생각보다 생각해야할게 많더라. 스크롤 애니메이션은 주안이형이 맡아서 이쁘게 잘 해주었다. 큰 이미지는 여기서 볼 수 있다. (피그마) 구현을 하면서 기존 디자인과 달라진 부분들이 많다. 피그마에서 한 디자인과 실제로 한 것과 뭔지 모르게 다른게 있더라. 계속 ..

공연장 입장 시 QR코드 티켓을 찍고 입장 확인을 받은 후에 들어간다. 코드를 찍는 안드로이드 앱에서 입금 여부를 확인한 후에 직접 입장할 수도 있겠지만 아무래도 눈에 보이는 변화가 있으면 좋을거란 생각이 들었다. 소켓을 이용한 실시간 통신을 넣어보기로 했다. 서버에서 입장 확인이 되면 클라이언트(해당 관객 기기)로 데이터를 보내주는 방식이다. 백엔드 대장님이 작업한 백엔드 코드이다. 열심히 배워왔다. const { Server } = require('socket.io'); const { httpServer } = require('../index'); class SocketSingleton { constructor(httpServer) { // try catch 없이 초기 설정이 fail 하면 서버 바로..

거의다 완성되어간다고 느낄 즈음에 기획이 대폭 수정되었다. 17-19 OB들이 진행하는 프로젝트이지만 우리 좋자고 하는게 아니라 후배들 도와주려는 목적이 크기 때문에. 코로나 거리두기 때문에 공연에 들어올 수 있는 인원수가 제한이 걸렸다. 관련해서 21학번 임원 친구들과 회의를 진행했다. 크게 두가지이다. 인당 티켓은 1매씩만 구입할 수 있고 새내기는 공짜. 그리고 새내기의 경우에는 '공연 전 소모임'을 신청할 수 있도록. 보통은 처음 사귄 친구들끼리 삼삼오오 모여서 다같이 공연을 보러 왔었는데 코로나 시국에는 그러기가 어렵지 않을까 라는 의견에서 나온 기획이었다. 공연 이틀 전쯤에 예비대학처럼 새내기 몇명과 선배들 몇명이 미리 만나서 연을 맺고, 친해진 친구들끼리 공연을 올 수 있도록 하는... 잘 될..

지난 몇주간 프론트 개발을 진행하면서 했던 여러 고민들과 해결들, 그리고 이것저것들을 기록해본다. 제목을 뭐라 지어야할지 한참 동안 고민했다. 적절한 제목 추천 받습니다. 1. 레이아웃 스토리북을 도입하면서 이걸 어떻게 하면 잘 쓸 수 있을까 생각하다가 전체 페이지에서 쓰는 컨테이너와 레이아웃을 모듈화시켜보기로 했다. 디자인한 페이지들의 레이아웃을 보면 세가지로 나눌 수 있다. [제목과 설명/내용(주로 인풋)/다음으로 버튼]으로 이루어진 페이지, [제목과 설명/내용(예매 관련 정보)]로 이루어진 페이지, 그리고 [티켓 콘텐츠] 하나로만 이루어진 페이지. 그리고 모든 페이지들에는 상태에 따라 뒤로가기 버튼이 있을 수 있지만 그와 상관 없이 항상 그만큼의 여백을 두었다. .InfoLayout { height..

프로젝트를 하면서 얻어간 지식과 경험을 몇개 정리해본다. 레오가 많이 알려주고 도와주었다. 1. 리덕스 활용 처음 리덕스를 공부할 때 읽었던 책에서 Ducks 패턴을 배웠다. 막상 써보려니까 괜히 복잡한 느낌이 들어서 그 후로 리덕스를 별로 안 좋아했던... 기억이.. 이번에 쓰게된 구조는 아래와 같다. 리덕스 공식 사이트에 적혀있는 것과 비슷할걸? 액션 타입, 액션 생성함수 그리고 리듀서를 각각 하나의 폴더에 담는다. 한가지 기능을 수정할 일이 생겼을 때 3개의 파일을 모두 건드려야 한다는 단점으로 어쩌구저쩌구 하는 글들을 많이 봤는데, 파일 하나에 타입, 액션, 리듀서 다 때려박아서 코드 길어지는게 더 오히려 불편했다. 개인적으로는 더 마음에 드는 방식이다. reducer/index.js 은 불러온 ..

기획단계에서부터 컴포넌트의 재사용을 염두에 두고 페이지들을 꾸리고 디자인했다. 모든 페이지들의 레이아웃과 컴포넌트들이 일관성을 유지하는게 제일 중요하다. 기획한 페이지들의 일부이다. 제목과 설명, 인풋창, 버튼 등이 모두 재활용될 수 있는 컴포넌트들이다. 세부적인 것들 (글의 내용, 인풋의 placeholder와 오른쪽에 있는 인디케이터, 버튼의 내용과 색깔, 동그란 테두리 유무 등등) 만 바꾸고 모든 코드를 재활용할 것을 염두에 두고 디자인했다. 티켓 예매 프로젝트 (1) - 기획, 디자인 학과 밴드 동아리를 하고 있다. 그래도 명색이 컴퓨터공학과 동아리인데, 결과물 하나정도는 있어야지. 0. 프로젝트의 시작은 이렇다. 평소 공연이었다면 티켓을 종이 명함으로 제작해 친구들에 9yujin.tistory...

학과 밴드 동아리를 하고 있다. 그래도 명색이 컴퓨터공학과 동아리인데, 결과물 하나정도는 있어야지. 0. 프로젝트의 시작은 이렇다. 평소 공연이었다면 티켓을 종이 명함으로 제작해 친구들에게 두세개씩 강매했겠지만 이번에는 다른 방법을 생각해야 했다. 직장생활 하시는 선배님들도 많이 오시기 때문에 티켓을 직접 판매하기가 힘들었다. ​ 고민끝에 생각한 것은 카카오톡 채널 기능에 있는 쿠폰이었다. 고스락 채널 채팅방에서 바로 송금을 할 수 있도록 했다. 카카오톡 qr송금에서 만들어주는 qr 송금코드를 url로 바꾸어 버튼에 링크를 걸어주었다. ​ 송금이 되면 채팅방을 통해 쿠폰을 보내주고, 현장에서 그 쿠폰을 보여주면 팜플렛과 티켓으로 교환해주고 입장을 시켜준다. 문제가 두개 있었다. ​ 하나는, 상대방과 카카..