분류 전체보기 (14) 썸네일형 리스트형 우리 비트만의 따뜻한 메시지, Hey Ticket 이야기 안녕하세요! WEB 정도영입니다. BEAT는 국내 최대 규모 IT동아리인 SOPT의 회원들이 모여서 만든 프로덕트입니다.저희는 SOPT의 꽃이라 불리는 장기해커톤 앱잼을 계기로 시작하여, 이후에도 꾸준히 스프린트를 통해 발전시켜 나가고 있습니다. BEAT의 문화인 Hey Ticket을 얘기하기에 앞서, 지금까지 여러 사이드 프로젝트를 진행하면서 제가 느낀 가장 중요한 점은 완성! 이라는 점이에요. 릴리즈까지 잘 성공했던 경험에서의 보람도 있지만,그보다는 조금 지치거나 동기부여가 잘 되지 않아서 팀에 대한 열정이 식었던 경우에 대한 아쉬움이 더 크게 남았던 것 같아요. 그래서 결과를 만들어 내는 것도 중요하지만, 지치지 않고 어떻게 일을 함께 꾸준히 해나갈지 그 과정과 방식에 대해서도 많은 고민을 했어요... SOPT 34기 앱잼 프로덕트, BEAT의 탄생 이야기 안녕하세요! Team BEAT의 팀리더, 서지우입니다. 한 번쯤은 팀블로그에서 BEAT의 시작을 다루고 싶어 글 작성하게 되었습니다.서비스 기획을 이제 막 시작한 대학생 기획자의 글이니, 가볍게 읽어주세요!그럼 시작하겠습니다 —̳͟͞͞♡ BEAT를 설명하기 위해서는 대학생 IT창업 동아리인 SOPT 얘기를 빼놓을 수 없는데요!SOPT의 꽃이라고 불리는 앱잼은 5주 동안 진행되는 장기 해커톤으로기획자, 디자이너, 개발자가 팀을 구성하여 하나의 프로덕트를 만들어가는 프로젝트입니다.BEAT 역시 12명의 솝트 회원들이 모여 탄생한 프로덕트죠! 그러나 이번 글은, 앱잼 이전에 제가 기획자로서 BEAT를 기획한 배경과 그 과정에서 겪었던 크고 작은 어려움들을 담고 있기 때문에 다소 개인적일 수 있습니다.(BE.. 🆘삐용삐용 이슈 -Vertical trim🆘 안녕하세요. 디자인팀 전희주입니다. 앞으로 비트가 탄생하는 동안의 디자인 이야기를 들려드릴 예정이에요.오늘은 Vertical trim 이슈에 대응한 이야기를 들려드리겠습니다. (이야기 보따리가 많이 준비되어 있으니 기대해 주세요.) 스타일과 컴포넌트를 제대로 사용했음에도 불구하고 디자인 시안과 개발단에서 구현한 디자인이 달랐어요. (삐용-삐용- 비상!!)텍스트들의 행간이 디자인 시안보다 넓게 개발되었는데, 폰트 스타일을 지정하는 과정에서 Vertical trim 옵션을 standard가 아닌 cap height to baseline으로 지정한 것이 문제였습니다. cap height to baseline 속성은 다음과 같은 이유로 존재합니다. 글자는 고유하게 가지는 공간이 있는데요, 텍스트 고유의 .. OG(오픈그래프) 이미지를 공연 포스터로 동적으로 설정하고 싶다면? 안녕하세요! WEB 김채현입니다. 티켓 사이트에서 공연 페이지를 공유할 때는 공연의 포스터가 공유가 되는 것이 일반적인데요,비트는 공연 페이지를 공유해도 BEAT 이미지가 보여지고 있습니다.이유는 바로 제가 index.html을 아래와 같이 작성했기 때문입니다.React는 SPA로 CSR방식으로 렌더링을 하기 때문에 하나의 index.html을 두고, 자바스크립트를 활용하여 데이터만 변경됩니다.공통적으로 적용되는 index.html에 OG 이미지를 "og_img.png"로 지정해주었기 때문에 카카오톡에서 페이지를 공유할 때 모든 페이지에서 항상 동일한 BEAT 이미지나 제목이 표시되는 문제가 발생하고 있었습니다. 그렇다면 어떻게 동적으로 각 공연에 맞는 OG를 설정할 수 있을까요? 해결 방법은 바로 r.. 팀블로그에 글을 업로드하기 전에 ✨ 팀 블로그 작성이 처음인 비팅이들을 위한 BEAT 팀블로그 규칙 🫶 🎵 작성할 때는BEAT의 팀블로그는 우리가 하는 일을 알리기 위해 시작되었습니다! 우리가 BEAT를 위해 어떤 노력을 하고 있으며, 어떠한 부분을 개선하고 발전시키기 위해 어떤 방식을 택했는지, 그 과정에서 어떤 일을 겪었는지 위주로 써주면 좋을 것 같아요! 👍 GOOD- 본인의 경험 또는 생각을 적은 글 ex) React-Query 사용법 알아보기 X / React-Query를 도입하며 겪은 문제 트러블슈팅 등 본인이 겪은 문제 뿐만 아니라 새로운 기술 / 기능을 도입하기까지 고민한 내용들을 적어도 좋아요!- 완벽하지 않아도 일단 써보는 습관 들이기- 이해하기 좋은 사진과 그림이 많은 글- BEAT와 관련이 깊은 글 본인이.. 구글 애널리틱스(GA) 도입해서 사용자의 유입을 알아보자! 안녕하세요! WEB 정도영입니다!오늘은 구글 애널리틱스를 도입해서 저희 서비스를 이용하는 사용자들의 유입을 알아보겠습니다! 1. Google Analytics 계정 생성1. 구글 Google Anayltics(https://analytics.google.com/analytics/web)에 접속합니다.2. 새 계정 이름을 기입합니다!작성 후, 스크롤을 내리고 다음 버튼을 클릭합니다.3. 속성 이름을 기재하고, 시간대, 통화를 설정합니다.다음 버튼을 클릭합니다.4. 업종 카테고리와 비즈니스 규모를 선택합니다.5. 비즈니스 목표를 선택합니다.6. 웹을 클릭 후, 웹 사이트 URL을 기입하고, 스트림을 생성합니다. 2. 내 웹사이트에 추적코드 추가추적코드를 설치하기에 앞서 추적코드에 대해서 알아보겠습니다. 2... 프론트엔드에서 production 서버와 development 서버 분리하기! 안녕하세요! WEB 정도영입니다!오늘은 저희 비트의 프론트엔드에서 production 서버와 development 서버 분리하기에 대해서 작성해보겠습니다.. ㅎ 저희 비트는 현재 사용자가 존재하는 서비스이기 때문에, 서비스를 배포한 후 배포 환경에서도 이상없이 잘 동작하는지, 확인할 필요가 있었고, 이에 따라서 서비스를 기획할 때 부터, 다른 파트들과 얘기해서 개발(테스트) 서버를 만들기로 결정했습니다! 그래서 저희는 애초에 도메인을 구입할 때 2개를 구입했는데요!먼저 메인 서버(production) 도메인은 https://www.beatlive.kr/ BEATBE AT WHERE YOUR HEART BEATSwww.beatlive.kr 그리고 개발(테스트) 서버(development) 도메인은 http.. 캐러셀... 너 뭔데 나를 이렇게 힘들게 해... 비비비상... 감자 윤신지... 메인 페이지 캐러셀을 담당하다!!.... 우당탕탕 캐러셀 일기 시작합니다. 안녕하세요! 메인 화면과 예매 조회 페이지 개발을 맡은 윤신지입니다. 🐤 저는 감자 개발자인데... 메인 페이지가 확장될 여지도 많고, 저같은 감자 개발자에게 적절한 챌린징 요소가 있다고 생각하여 메인 페이지를 하고 싶다고 어필을 하게 되었어요. 🫶 덕분에 메인 페이지를 맡게 되었습니다~~ 햄버거바도, 플로팅 버튼도 예상치 못하게 저를 힘들게 하였지만 개발 전 저에게 가장 걱정되는 부분은 롤링배너라고도 불리는 캐러셀이었습니다! 😢 물론 이전에 진행한 작은 프로젝트에서 캐러샐을 라이브러리 없이 구현한 경험이 있었지만, BEAT의 캐러셀과는 조금 다른 방식으로 동작하기도 하였고 모바일 뷰에서 .. 이전 1 2 다음
